Scss基础用法

 

一、注释用法：

（1）//comment：该注释只是在.scss源文件中有，编译后的css文件中没有。

（2）/! /：重要注释，任何style的css文件中都会有，一般放置css文件版权说明等信息。

（3）/ /：该注释在compressed的style的css中没有，其他style的css文件都会含有。

 

二、变量：

1.一般以$开头，有作用域限制

$color: red;.div{
       background-color: $color;    }

 

2.若子选择器中定义的变量想成为全局变量，可以用!global

.div{
     $width: 5px !global;  width: $width;}.p{
     width: $width;}

 

3.嵌套引用，需#{}进行包裹

$left: left;.div{
      border-#{$left}-width: 5px; }

 

4.计算

$left: 20px;.div{
       margin-left: $left + 12px;    margin-top: $left  / 2;}

 

三、选择器

1.选择器嵌套（允许属性嵌套）

.div{
       .span{        height: 12px;    }    .p{
           border: {　　　　　　color: red;　　　　}    }}

 

2.引用父元素（使用&符号）

.div{
       &:hover{        cursor: pointer;    }}

 

四、代码复用

1.继承（若在div2后再加一个div1，也会影响div2的属性）

.div1{
       font-size: 14px;}.div2{
       @extend .div1;    color: red;}

 

2.引用外部的scss文件（文件路径建议用相对路径）

@import  ‘ ./test.scss’;

 

3.Mixin与Include

//使用@mixin命令，定义一个代码块@mixin left {
   　　float: left;　　margin-left: 5px;}//使用@include命令，调用这个mixin代码块div {
   　　@include left;}

 

五、参数

eg1：

@mixin common($value1, $value2, $defaultValue: 5px){
       display: block;    margin-left: $value1;    margin-right: $value2;    padding: $defaultValue;}.div1{
       font-size: 8px;    @include common(11px, 13px, 15px);}.div2{
       font-size: 8px;    @include common(11px, 13px);}

 

eg2：

//生成浏览器前缀。　　@mixin rounded($vert, $horz, $radius: 10px) {
   　　　　border-#{$vert}-#{
   $horz}-radius: $radius;　　　　-moz-border-radius-#{
   $vert}#{
   $horz}: $radius;　　　　-webkit-border-#{
   $vert}-#{
   $horz}-radius: $radius;　　}//使用的时候调用：　　#navbar li {
    @include rounded(top, left); }　　#footer {
    @include rounded(top, left, 5px); }

 

六、条件语句

可以用@if(){}来判断，也可以用@if(){}@else来判断

@if lightness($color) > 30% {
   　　background-color: #000;} @else {
   　　background-color: #fff;}

 

七、循环语句

1.for循环

@for $i from 1 to 10 {
   　　.border-#{$i} {
   　　　　border: #{$i}px solid blue;　　}}

 

2.while循环

$i: 6;　@while $i > 0 {
   　　.item-#{$i} {
    width: 2em * $i; }　　$i: $i - 2;}

 

3.each（类似于for）

@each $member in a, b, c, d {
   　　.#{$member} {
   　　　　background-image: url("/image/#{$member}.jpg");　　}}

 

八、函数

可以自定义函数

@function double($n) {
   　　@return $n * 2;}#sidebar {
   　　width: double(5px);}