在一个项目中,样式是必不可少的一部分,而对于一个完整的项目来说是有个基准色调的。在项目需求变化不大的情况下,可以直接在css中写这些颜色值之类的东西。但是如果遇到一个朝令夕改的领导或者甲方,那会变得相当惨。
因此,在项目中使用预编译语言就显得很有效率,且简单。目前项目中就使用 scss 预编译语言。
首先区分一下:Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:
- 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
- 语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。 这是中文官网。
1、变量
我们可以把基准色调 设置成变量,或者一些常用到的颜色。比如:
1 $bg_color: #ededed; // 背景色 2 $text_color: #333; // 文字颜色 3 $margin_bottom: 40upx; // 各个条目的下边距
2、使用变量
.content { background-color: $bg_color; flex-direction: column; color: $text_color; }
当基准色调改变,或者整体样式变化时,就不用一个一个去找,直接改变,变量的值,之后再重新编译就可以了。
3、嵌套规则
原来写法:
.content { background-color: #ededed; flex-direction: column; } .content .list { width: 400upx; color: #ff0; } .content .list image { width: 60upx; height: 60upx; }
scss 嵌套规则写法:
.content { background-color: $bg_color; flex-direction: column; .list { width: 400upx; color: #ff0; image { width: 60upx; height: 60upx; } } }
4、父选择器的标识符 &
可能主要是用于一些 伪类 选择器。看例子:
.content { background-color: $bg_color; flex-direction: column; .list { &:hover { background-color: #ff0; color: #fff; } } }
编译之后:
.content { background-color: #ededed; flex-direction: column; } .content .list:hover { background-color: #ff0; color: #fff; }
另一个例子:
.content { background-color: $bg_color; flex-direction: column; .list { a &:hover { background-color: #ff0; color: #fff; } } }
编译后:
.content { background-color: #ededed; flex-direction: column; } a .content .list:hover { background-color: #ff0; color: #fff; }
由此可以看出 & 代表的是父级的整体选择器。
5、群组选择器的嵌套,直接看代码
.content { background-color: $bg_color; flex-direction: column; .list { .name, .age, .sex { margin-bottom: 40upx; } } }
编译后:
.content { background-color: #ededed; flex-direction: column; } .content .list .name, .content .list .age, .content .list .sex { margin-bottom: 40upx; }
6、子组合选择器和同层组合选择器:>、+、~
.content { background-color: $bg_color; flex-direction: column; .list { ~ .name { color: #ff0; } + .age { font-size: 40upx; } > .sex { margin-bottom: 40upx; } } }
编译后:
.content { background-color: #ededed; flex-direction: column; } .content .list~.name { color: #ff0; } .content .list+.age { font-size: 40upx; } .content .list>.sex { margin-bottom: 40upx; }
7、嵌套属性
.content { background-color: $bg_color; flex-direction: column; .list { border: { style: solid; width: 2px; color: #f00; } } .title { border: 1px solid #4cd964 { left: 2px; bottom: 10px; } } }
编译后:
.content { background-color: #ededed; flex-direction: column; } .content .list { border-style: solid; border-width: 2px; border-color: #f00; } .content .title { border: 1px solid #4cd964; border-left: 2px; border-bottom: 10px; }
8、默认变量值 !default
$text_color: #333 !default;
这句的意思是:如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值。
这种一般用来处理,引入的 scss 文件 是否会有你生命的变量,如果有,则用引入的,如果没有,则使用默认的 #333;有点儿类似于 js 声明变量时候的兜底行为。
9、规则内引入 scss 文件
举例说明,有一个名为_blue-theme.scss
的局部文件,内容如下:
aside {
background: blue;
color: white;
}
引入文件:
.blue-theme {@import "blue-theme"}
编译后:
.blue-theme {
aside {
background: blue;
color: #fff;
}
}
10、混合器 @mixin
@mixin rounded-corners { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
使用:
notice { background-color: green; border: 2px solid #00aa00; @include rounded-corners; }
编译后:
.notice { background-color: green; border: 2px solid #00aa00; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
混合器中不仅可以包含属性,还可以包含规则。
@mixin no-bullets { list-style: none; li { list-style-image: none; list-style-type: none; margin-left: 0px; } }
使用:
ul.plain { color: #444; @include no-bullets; }
编译后:
ul.plain { color: #444; list-style: none; } ul.plain li { list-style-image: none; list-style-type: none; margin-left: 0px; }
11、给混合器传参
@mixin link-colors($normal, $hover, $visited) { color: $normal; &:hover { color: $hover; } &:visited { color: $visited; } }
使用:
a { @include link-colors(blue, red, green); }
编译后:
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
当你@include混合器时,有时候可能会很难区分每个参数是什么意思,参数之间是一个什么样的顺序。为了解决这个问题,scss
允许通过语法$name: value
的形式指定每个参数的值。这种形式的传参,参数顺序就不必再在乎了,只需要保证没有漏掉参数即可:
a { @include link-colors( $normal: blue, $visited: green, $hover: red ); }
12、默认参数值
@mixin link-colors( $normal, $hover: $normal, $visited: $normal ) { color: $normal; &:hover { color: $hover; } &:visited { color: $visited; } }
13、使用选择器继承 来精简css,使用:@extend
.error { border: 1px solid red; background-color: #fdd; } .seriousError { @extend .error; border-width: 3px; }
不只继承 .error 自己,和它相关的也继承
//.seriousError从.error继承样式 .error a{ //应用到.seriousError a color: red; font-weight: 100; } h1.error { //应用到hl.seriousError font-size: 1.2rem; }
了解了这些就算是简单入门了,至少已经让你的css省时省力好多了,想要深入研究就多看官网吧。后面学习到再做总结。