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

}

巴特西

Scss基础用法

Scss基础用法

最新文章

热门文章