sass基础语法

Posted 2020-11-25 chenyingying0

sass基础语法

!default 表示默认值

+ 拼接字符串

#{ } 识别为变量名

demo.scss

$width:300px;
$height:300px;

$color:#e03434;

$baseWidth:200px;

$baseWidth:100px !default;

.div1{
    width:$width;
    height:$height;
    background-color:$color;
}
.div2{
    width:$baseWidth;
    height:$baseWidth;
    background-color:$color;
}

demo.css

.div1 {
  width: 300px;
  height: 300px;
  background-color: #e03434; }

.div2 {
  width: 200px;
  height: 200px;
  background-color: #e03434; }

变量作用域

内部变量只能在内部使用，否则会报错

demo.scss

$width: 300px;
$color: #ffe932;


.div1 {
    
    height: $width;

    $widthInner: 100px;
    width: $widthInner;

}

.div2 {
    width: $width;
}

demo.css

.div1 {
  height: 300px;
  width: 100px;
}

.div2 {
  width: 300px;
}

通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

• 文件拓展名是 .css；
• 文件名以 http:// 开头；
• 文件名是 url()；
• @import 包含 media queries。

org.scss

@import ‘org.css‘;

org.css

@import url(org.css);

/*# sourceMappingURL=org.css.map */

正常情况下的使用：

在_base.scss中写入通用样式

$color: red !default;

body {
    margin: 0;
    padding: 0;
}

引用通用样式文件

demo.scss

@import ‘base‘;
$width: 300px;
$color: #ffe932;



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

demo.css

body {
  margin: 0;
  padding: 0;
}

.div {
  width: 300px;
  background-color: #ffe932;
}

sass常见的基本数据类型

list 数组下标从1开始

demo.scss

$width: 300px;
$zoomValue: 2;


$color: red;
$colorHex: #ffe932;


$str: ‘hello.jpeg‘;


$list: (100px,200px,‘string‘,2);

$map: (top:1px,left:2px,bottom:3px,right:4px);

/*number*/
.div {
    width: $width;
    height: $width;
    zoom: $zoomValue;
}


/*color*/
.div {
    color: $color;
    background-color: $colorHex;
}

/*string*/
.div {
    background-image: url(‘images/‘+$str);
}

/*list*/
.div {
    width: nth($list, 1);
    height: nth($list, 2);

    zoom:index($list,‘string‘);
}

/*map*/

.div {
    top:map-get($map,top);
    left:map-get($map,left);
}
.div {
    @each $key, $value in $map {
        #{$key}:$value;
    }
}

demo.css

/*number*/
.div {
  width: 300px;
  height: 300px;
  zoom: 2;
}

/*color*/
.div {
  color: red;
  background-color: #ffe932;
}

/*string*/
.div {
  background-image: url("images/hello.jpeg");
}

/*list*/
.div {
  width: 100px;
  height: 200px;
  zoom: 3;
}

/*map*/
.div {
  top: 1px;
  left: 2px;
}

.div {
  top: 1px;
  left: 2px;
  bottom: 3px;
  right: 4px;
}

sass加减乘除基本运算

直接运算需要加 ()

通过变量进行运算不需要加 ()

demo.scss

$num1:100px;
$num2:200px;


$width: $num1 + $num2;

$color1: #010203;
$color2: #040506;
$color3: #a69e61;

$str:‘hello.jpeg‘;


.div {
    width: $width;
}

/* 加减乘除 */
.div {
    font: 10px/8px;
    font: (10px/8);
    font: (10px*8);
    width: $width/2;
    margin-left: (5px + 8px/2);
}

/*颜色运算*/
// 不建议直接运算
.div {
    color: $color1 + $color2;
}

// 建议使用sass内置函数
.div {
    color: mix($color1, $color2);//混合色
    color: red($color1);//red 取出红色值
    color: red($color3);
    color: green($color3);
    color: blue($color3);
    color: rgb(red($color3),green($color3),blue($color3));//拼接处想要的色值
}

/*字符串*/

.div {
    background-image: url(‘images/‘+$str);
}

demo.css

@charset "UTF-8";
.div {
  width: 300px; }

/* 加减乘除 */
.div {
  font: 10px/8px;
  font: 1.25px;
  font: 80px;
  width: 150px;
  margin-left: 9px; }

/*颜色运算*/
.div {
  color: #050709; }

.div {
  color: #030405;
  color: 1;
  color: 166;
  color: 158;
  color: 97;
  color: #a69e61; }

/*字符串*/
.div {
  background-image: url("images/hello.jpeg"); }

/*# sourceMappingURL=demo.css.map */

mixin 语法块

demo.scss

/*一般mixin*/

@mixin helloMixin {
    display: inline-block;
    padding: 20px;
    font: {
        size: 20px;
        weight: 500;
    }

    color: red;
}

/*嵌套mixin*/

@mixin helloMixin2 {
    padding: 10px;

    @include helloMixin;

    background-color: red;
}

/*参数mixin*/

@mixin sexy-border($color, $width) {
    border: {
        color: $color;
        width: $width;
        style:dashed;
    };
}
.div {
    width: 100px;
    @include helloMixin2;
}

.div {
    @include sexy-border(blue,2px);
}

demo.css

@charset "UTF-8";
/*一般mixin*/
/*嵌套mixin*/
/*参数mixin*/
.div {
  width: 100px;
  padding: 10px;
  display: inline-block;
  padding: 20px;
  font-size: 20px;
  font-weight: 500;
  color: red;
  background-color: red;
}

.div {
  border-color: blue;
  border-width: 2px;
  border-style: dashed;
}

sass继承和嵌套

demo.scss

/*简单继承*/
.div {
    border:1px;
    background-color: red;
}

.divext {
    @extend .div;
    border-width: 3px;
}

/*关联属性继承*/
.div1 {
    border:1px;
    background-color: red;
}

.div1.other {
    background-image: url(‘hello.jpeg‘);
}

.divext {
    @extend .div1;
}

/*链式继承*/

.div1 {
    border: 1px solid #000;
    color: blue;
}
.div2 {
    @extend .div1;
    color: red;
}
.div3 {
    @extend .div2;
    color: #000;
}

/*伪类继承*/
a:hover {
    text-decoration: underline;
}
.hoverlink {
    color: red;
    @extend :hover;
}

demo.css

@charset "UTF-8";
/*简单继承*/
.div, .divext {
  border: 1px;
  background-color: red; }

.divext {
  border-width: 3px; }

/*关联属性继承*/
.div1, .divext, .div2, .div3 {
  border: 1px;
  background-color: red; }

.div1.other, .other.divext, .other.div2, .other.div3 {
  background-image: url("hello.jpeg"); }

/*链式继承*/
.div1, .divext, .div2, .div3 {
  border: 1px solid #000;
  color: blue; }

.div2, .div3 {
  color: red; }

.div3 {
  color: #000; }

/*伪类继承*/
a:hover, a.hoverlink {
  text-decoration: underline; }

.hoverlink {
  color: red; }

/*# sourceMappingURL=demo.css.map */

嵌套--子元素的样式

嵌套--样式属性分离

demo.scss

$width: 300px;
$color: #fff;

.div1 {
    width: $width;
    height: $width;;
    background-color: #color;

    .div-inner {
        width: $width;
        height: $width;
        background-color: #color;
        .div-inner-inner {
            width: $width;
            height: $width;
            background-color: #color;
        }
    }
    a {
        color: red;
    }
}

.div1 {
    width: $width;
    height: $width;;
    background-color: #color;

    .div-inner {
        border: {
            left: 1px solid #000;
            top: 2px solid #000;;
        };
        background: {
            image:url(‘abc.png‘);
            color: #000;;
        };
    }
}

demo.css

.div1 {
  width: 300px;
  height: 300px;
  background-color: #color;
}
.div1 .div-inner {
  width: 300px;
  height: 300px;
  background-color: #color;
}
.div1 .div-inner .div-inner-inner {
  width: 300px;
  height: 300px;
  background-color: #color;
}
.div1 a {
  color: red;
}

.div1 {
  width: 300px;
  height: 300px;
  background-color: #color;
}
.div1 .div-inner {
  border-left: 1px solid #000;
  border-top: 2px solid #000;
  background-image: url("abc.png");
  background-color: #000;
}

sass条件控制

demo.scss

/*if*/

$type: ‘bufy‘;

p {
    @if $type == ‘bufy‘ {
        color: red;
    } @else if $type == ‘tim‘ {
        color: blue;
    } @else if $type == ‘tony‘ {
        color: green;
    } @else {
        color: black;
    }
}

@if $type == ‘bufy‘ {
    .div {
        color: red;
    }
}@else {
    .div {
        color: blue;
    }
}

/*for*/

@for $i from 1 through 3 {
    .item#{$i} {
        width: 1px * $i;
    }
}
@for $i from 1 to 3 {
    .item#{$i} {
        width: 1px * $i;
    }
}
/*for list*/
$list:(1,2,3,4,5);
@for $i from 1 through length($list) {
    .item#{$i} {
        width: 1px * $i;
    }
}

/*while*/

$i: 6;

@while $i > 0 {
    .item#{$i} {
        width: 1px * $i;
    }

    $i: $i - 2;
}

/*each*/

$map:(top: 1px,left:2px,bottom: 3px,right: 4px);

.div {
    @each $key , $value in $map {
        #{$key}:$value;
    }
}

demo.css

/*if*/
p {
  color: red;
}

.div {
  color: red;
}

/*for*/
.item1 {
  width: 1px;
}

.item2 {
  width: 2px;
}

.item3 {
  width: 3px;
}

.item1 {
  width: 1px;
}

.item2 {
  width: 2px;
}

/*for list*/
.item1 {
  width: 1px;
}

.item2 {
  width: 2px;
}

.item3 {
  width: 3px;
}

.item4 {
  width: 4px;
}

.item5 {
  width: 5px;
}

/*while*/
.item6 {
  width: 6px;
}

.item4 {
  width: 4px;
}

.item2 {
  width: 2px;
}

/*each*/
.div {
  top: 1px;
  left: 2px;
  bottom: 3px;
  right: 4px;
}

内置函数

@debug 实时打印结果

demo.scss

$number: 70;
$number2: 71;


$numberPercent: 0.77;

$numberRound: 25.9;

$abs: 3;

/*number*/

.div {
    zoom:percentage($numberPercent);

    zoom:round($numberRound);

    zoom:ceil($numberRound);

    zoom:floor($numberRound);

    zoom:abs($abs);

    zoom:min($number,$number2);

    zoom:max($number,$number2);

    zoom: random(100);
}

/*list*/

$list:(1,‘p‘,3,4,5);
.div {
    zoom: length($list);//获取数组长度

    zoom: nth($list,2);//获取指定下标的元素

    @debug set-nth($list, 1 ,‘x‘);//替换指定下标的元素

    @debug join($list, (6,7,8));//拼接数组

    @debug append($list,‘999‘);//从数组尾部添加元素

    @debug index($list,‘p‘);//返回指定元素在数组中的位置
}

/*string*/
$string:‘hello‘;
$stringNo:hello;

$stringUP: ‘HELLO‘;
.div {
    background-image: unquote($string);//去除引号

    background-image: quote($stringNo);//添加引号

    background-image: str-length($string);//获取字符串长度

    @debug str-insert($string,‘p‘,2);//在指定位置插入字符

    @debug str-index($string,‘l‘);//返回指定字符在字符串中的位置

    background-image: to-upper-case($string);//转大写

    background-image: to-lower-case($stringUP);//转小写

}

/*map*/

$map:(top: 1px,left:2px,bottom: 3px,right: 4px);
.div {
    width: map-get($map,top);//根据key获取相关值

    //map-merge($map1,$map2)
    //将两个map合并成一个新的map
    
    @debug map-remove($map,bottom);//从map中删除一个kep，返回一个新map

    @debug map-keys($map);//返回map中所有的key

    @debug map-values($map);//返回map中所有的value

    @debug map-has-key($map,abc);//判断map中是否有key对应的value值
}

@mixin foo($args...) {
    @debug keywords($args);
    //返回一个函数的参数，这个参数可以动态的设置key和value
}

@include foo($arg1:‘abc‘,$arg2:‘efg‘);


/*自定义函数*/
$rem1: 100px;
@function px2rem($px) {
    $rem: 37.5px;

    @debug $px;

    @return ($px/$rem) + rem;
};

.div {
    width: px2rem($rem1);
}

demo.css

@charset "UTF-8";
/*number*/
.div {
  zoom: 77%;
  zoom: 26;
  zoom: 26;
  zoom: 25;
  zoom: 3;
  zoom: 70;
  zoom: 71;
  zoom: 28; }

/*list*/
.div {
  zoom: 5;
  zoom: "p"; }

/*string*/
.div {
  background-image: hello;
  background-image: "hello";
  background-image: 5;
  background-image: "HELLO";
  background-image: "hello"; }

/*map*/
.div {
  width: 1px; }

/*自定义函数*/
.div {
  width: 2.6666666667rem; }

/*# sourceMappingURL=demo.css.map */