尝试使用Scss，会让你工作效率更高，代码更易管理
Scss 有三大特性：嵌套 混合器 变量
变量
规范变量命名 建议使用-中划线 变量默认值使用!default
$warnning-color: red;
$warnning-border: 1px solid $warning-color;
// !default !important的反义词
$set-width: 400px !default;
嵌套
- 父选择器 &
.content {
a {
&:hover { margin-bottom: 1.4em }
}
}
// 转换后
.content a:hover {margin-bottom: 1.4em}
- 组合嵌套
.container {
h1, h2, h3 {margin-bottom: .8em}
}
// 转换后
.container h1, .container h2, .container h3 { margin-bottom: .8em }
nav, aside {
a {color: blue}
}
// 转换后
nav a, aside a {color: blue}
- 结合
css+ > ~选择器
article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}
// 转换后
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }
- 属性嵌套（注意冒号）
nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}
// 转换后
nav {
border: 1px solid #ccc;
border-left: 0px;
border-right: 0px;
}
导入文件@import
相对css导入文件来说，不会导致额外的下载请求，而且也更模块化和高效。导入文件里面的混合器和变量也可以直接使用
@import
- 局部文件通常是使用_开头命名 在引入的时候也可以忽略下划线
// 引入thems/_night-sky
@import "theme/night-sky"
- 支持嵌套
aside {
background: blue;
color: white;
}
.blue-theme {@import "blue-theme"}
//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。
.blue-theme {
aside {
background: blue;
color: #fff;
}
}
注释
body {
color: #333; // 这种注释内容不会出现在生成的css文件中
padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}
混合器 mixin
- 混合器更像是表现样式的
css类 用来描述展示怎样的效果
@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;
}
- 传入参数 传入参数也可以设置默认值
@mixin link-colors(
$normal-color:red,
$hover-color:$normal-color,
$visited-color:$normal-color
) {
color: $normal-color;
&:hover { color: $hover-color; }
&:visited { color: $visited-color; }
}
a {
@include link-colors(blue, red, green);
}
继承 @extend
- 继承是复制替换
css中的选择器（所有包括目标的规则）混合器是复制里面的属性。所以继承相对混合器，生成的css文件会小很多 - 使用继承的最好方法就是不好在规则中使用后代选择器。因为这样会让后面规则失控
//通过选择器继承继承样式
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
在上边的代码中，.seriousError将会继承样式表中任何位置处为.error定义的所有样式。以class="seriousError" 修饰的html元素最终的展示效果就好像是class="seriousError error"。相关元素不仅会拥有一个3px宽的边框，而且这个边框将变成红色的，这个元素同时还会有一个浅红色的背景，因为这些都是在.error里边定义的样式。
引申
关于@mixin 和 @extend 对比
-
@minxin相对@extend更可控， - 更易减少复杂度 尤其
@mixin可以多层嵌套和传入参数 - 在使用gzip后
@mixin比@extend的压缩比更大。参考
控制命令
@if
@mixin txt($weight) {
color: white;
@if $weight == bold { font-weight: bold;}
}
.txt1 {
@include txt(none);
}
.txt2 {
@include txt(bold);
}
//转化后
.txt1 {
color: white;
}
.txt2 {
color: white;
font-weight: bold;
}
@mixin txt($weight) {
color: white;
@if $weight == bold { font-weight: bold;}
@else if $weight == light { font-weight: 100;}
@else if $weight == heavy { font-weight: 900;}
@else { font-weight: normal;}
}
@for
@for $i from 1 through 4 {
.col-#{$i} { width: 100/4 * $i + %;}
}
-
@each使用（#{$var}来占位）
@each $usr in bob, john, bill, mike {
.#{$usr}-avatar {
background-image: url('/img/#{$usr}.png');
}
}
@each in
@each $usr in bob, john, bill, mike {
.#{$usr}-avatar {
background-image: url('/img/#{$usr}.png');
}
}
$ppl: ( usr1:bob, usr2:john, usr3:bill, usr4:mike );
@each $key, $usr in $ppl {
.#{$usr}-avatar {
background-image: url('/img/#{$usr}.png');
}
}
@while
$x:1;
@while $x < 13 {
.col-#{$x} { width: 100/12 * $x;}
$x: $x + 1;
};
操作符
- 判断严格相等 是使用
== - 逻辑操作符是
andornot
$list-map: (success: lightgreen, alert: tomato, info: lightblue);
@mixin button-state($btn-state) {
@if (length($list-map) > 2 or length($list-map) < 5) {
background-color: map-get($list-map, $btn-state);
}
}
.btn {
@include button-state(success);
}
颜色运算 (使用rgba hsl请保证透明通道一致)
color: rgba(70, 132, 153, 1) + rgba(32, 68, 121, 1);
color: #468499 + #204479;