SCSS学习

一，什么是SCSS？

答：最近才算系统的了解道路Sass，scss这些名词，

Sass:是CSS3的一种扩展，增加了变量，嵌套，扩展，混合，颜色等特殊语法。通过命令行工具或者是web框架来使其转为标准的CSS。

Scss则是Sass的新语法，是CSS3的超集。

对我而言，Scss与Css语法形式极为相似，也正是最近在练习react+webpack小项目的时候用到才想要学习的。

二，入门：

1，变量：

SCSS:

$color:#000;
body{
    color:$color;
}

CSS:

body{
    color:#000;
}

2,嵌套：

SCSS：

ul{
    li{
         border:1px solid #000;
         a{
               font-size:16px;
           }
      }
}

CSS:

ul li{border:1px soid #000;}
ul li a{font-size:16px;}

3，导入：

SCSS:

//a.scss
body,a,li{margin:0;padding:0;}
//b.scss
body{color:#000;}

CSS:

body,a,li{margin:0;padding:0;}
body{color:#000;}

4，混合（mixin）:

SCSS:

@mixin border-radiu($a){
            -webkit-border-radiu:$a;
            -moz-border-radiu:$a;
           -mz-border-radiu:$a;
            border-radiu:$a;
}
.div1{
        border:1px solid #000;
        @include border-radiu(10px);
}

CSS:

.div1{
         border:1px solid #000;
         -webkit-border-radiu:10px;
         -moz-border-radiu:10px;
         -mz-border-radiu:10px;
         border-radiu:10px;
}

5，扩展和继承
SCSS:

.message{
            border:1px solid #000;
}
.success{
    @extend .message;
    background:green;
}

CSS:

.message{
          border:1px solid #000;
 }
.success{
          border:1px solid #000;
          background:green;
}

6，运算
SCSS:

div[role="left"]{
      width:96/3*100%;
}

CSS:

div[role="left"]{
         width:32%;
}

7，颜色
SCSS:

$linkColor: #08c;
a {
    text-decoration:none;
    color:$linkColor;
    &:hover{
      color:darken($linkColor,10%);
    }
}

CSS:

a {
  text-decoration: none;
  color: #0088cc;
}
a:hover {
  color: #006699;
}

猜你喜欢