Scss基础用法

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}- 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);
}