sass基礎語法-有解無憂

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 */

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/79744.html

標籤：Html/Css

上一篇：Sass環境安裝-Sass sublime 編輯器插件編譯方法

下一篇：博客前端其他雜項