1、演示
2、未优化前的代码
.header { width: 100px; height: 100px; background-color: red; } @media (min-width: 320px) and (max-width: 480px) { .header { width: 10px; } } @media (min-width: 320px) and (max-width: 480px) { .header { height: 20px; } } @media (min-width: 481px) and (max-width: 768px) { .header { height: 40px; } } @media (min-width: 769px) and (max-width: 1024px) { .header { height: 60px; } } @media (min-width: 1025px) and (max-width: 1200px) { .header { height: 80px; } } @media (min-width: 1201px) { .header { height: 100px; } }
可以想象一下,在真实的项目里面有这么多选择器要写,有这么多根据不同的设备处理不同的样式,这个代码根本看不了。
3、优化方法
想办法优化成容易书写,容易维护,可以借助预编译器 sass 或者 less
4、sass介绍
Sass(Syntactically Awesome Stylesheets)是一种强大的CSS预处理器,它为CSS提供了许多增强功能,使得样式表的编写更加简洁和灵活。通过 Sass,您可以使用变量、嵌套规则、混合器、继承等功能,使得样式表的维护和管理更加容易。
其中,最常用的功能之一是变量。使用 Sass,您可以定义一次变量,然后在整个样式表中多次使用,这样可以方便地在需要时进行修改,而无需逐个查找和替换。
另一个重要的功能是嵌套规则。通过 Sass,您可以编写更加结构清晰的样式表,使用嵌套规则可以更好地组织和管理样式,提高代码的可读性和维护性。
此外,Sass还支持混合器(Mixins)和继承(Inheritance)等功能,这些功能可以帮助您减少样式表的重复代码,提高样式表的复用性和可维护性。
总的来说,Sass是一个强大的工具,可以帮助您更高效地编写和管理样式表,提高前端开发的效率和质量。
5、混合器
什么叫做混合: 可以提取一部分的公共代码
未编译前的代码,可以公共使用
@mixin flex{ display: flex; justify-content: center; align-items: center; } .header{ width: 100%; @include flex; } .nav{ @include flex; }
编译后的代码,会被编译为存粹的Css,最终的运行结果也是这个存粹的Css
.header{ width: 100%; display: flex; justify-content: center; align-items: center; } .nav{ display: flex; justify-content: center; align-items: center; }
6、传递参数
编译前的scss文件
@mixin flex($layout){ display: flex; justify-content: $layout; align-items: $layout; } .header{ width: 100%; @include flex(center) } .nav{ @include flex(start) }
编译后的css文件
.header{ width: 100%; display: flex; justify-content: center; align-items: center; } .nav{ display: flex; justify-content: start; align-items: start; }
7、传递内容
编译前的scss文件
@mixin flex($layout){ display: flex; justify-content: $layout; align-items: $layout; @content; } .header{ width: 100%; @include flex(center){ background-color: red; } } .nav{ @include flex(start){ position: relative; } }
编译前的css文件
.header{ width: 100%; display: flex; justify-content: center; align-items: center; background-color: red; } .nav{ display: flex; justify-content: center; align-items: center; position: relative; }
8、优化后的代码
$typePoint:( 'phone':(320px,480px), 'pad':(481px,768px), 'notebook':(769px,1024px), 'desktop':(1025px,1200px), 'tv':1201px, ); @mixin responseTo($type){ $bp:map-get($typePoint,$type); @if type-of($bp) == 'list' { @media (min-width: nth($bp,1)) and (max-width: nth($bp,2)) { @content; } } @else { @media (min-width: $bp) { @content; } } } .header{ width: 100%; @include responseTo('phone'){ height: 50px; } @include responseTo('pad'){ height: 70px; } @include responseTo('notebook'){ height: 90px; } @include responseTo('desktop'){ height: 110px; } @include responseTo('tv'){ height: 130px; } }
写完保存过后,生成的css文件内容和第二步一模一样,而且上面这个代码只需要做一次,不需要每次都写,项目里面做一次甚至可以跨越项目,后边要做的无非就是使用这个混合