标签：webkit 选择器 www. gre web 样式 order cti get
scss在项目中使用方便，简洁~
1.定义变量
$color:red;
.box{
background-color:$color;
}
2.嵌套css
#content{
div{
aside{
background-color: red;
}
h1{
color: green;
}
}
}
3.父选择器标识符
#content{
div{
aside{
background-color: red;
}
a{
color: red;
&:hover{
color: blue;
}
}
}
}
4.嵌套属性
nav{
border{
width:1px;
style:solid;
color:red;
}
}
5.混合
先定义要混合的样式：@mixin
@mixin corners{
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
}
使用：@include
div{
width: 200px;
height: 100px;
@include corners;
}
6.继承
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
7.函数的使用
$fontSize:37.5;
@function px3rem($px){
@return ($px/$fontSize) +rem ;
}
8.控制指令
if
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
for
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
9.导入文件
@import ‘reset‘;
10.注释
body {
color: #333; // 这种注释内容不会出现在生成的css文件中
padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}
以上为sass的基础语法，详细内容请参考https://www.sass.hk/网站。
标签：webkit 选择器 www. gre web 样式 order cti get
原文地址：https://www.cnblogs.com/amy2017/p/10075951.html
