国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

SASS

chanthuang / 3073人閱讀

摘要:編譯之后結(jié)果混合作用繼承復(fù)用定義使用傳參可以對混合進(jìn)行傳遞參數(shù),和設(shè)置默認(rèn)值。占用中的位置,使用其樣式內(nèi)容。在模式下,進(jìn)行色彩運算時,要求通明度必須保持一致,否則無法進(jìn)行運算。

Sass 是一個CSS 的擴(kuò)展,在語法CSS語法的基礎(chǔ)上,增加變量,嵌套規(guī)則, 混合,導(dǎo)入,函數(shù)等功能
對CSS進(jìn)行預(yù)處理的“中間語言”

文件格式

.sass ,.scss
scss是對css的一種拓展,跟css很像,是開發(fā)中最常用的模式。
Sass從第三代開始,放棄了縮進(jìn)風(fēng)格,并且完全向下兼容普通的CSS代碼。被稱為scss

編譯Sass

Node環(huán)境

sass app.sass app.css

sass --watch app.sass:app.css  // 自動編譯更新CSS
// 用來Sass命令來監(jiān)視某個Sass文件的改動
sass --style expanded app.scss app.css // 編譯的CSS格式更像是手寫的CSS樣式 

工程化工具

Gulp插件:gulp-sass

var gulp = require("gulp"),
    sass = require("gulp-sass"),
    perfixer = require("gulp-autoprefixer"),
    minifyCss = require("gulp-minify-css"); 
    
    
    
// 編譯Sass 并添加CSS前綴    ,壓縮
gulp.task("sass", function () {
    
    gulp.src("*.sass")
        .pipe(sass())  // 編譯
        .pipe(perfixer()) // 自動改名
        .pipe(minifyCss()) // 壓縮
        .pipe(gulp.dest("dist")); 
    
});    

gulp.task("default", ["sass"]);

Sass編譯后亂碼,在Sass文件第一行添加 @charset "UTF-8"。再進(jìn)行編譯。

變量

在SASS中是一個塊級作用域,在塊內(nèi)部定義的變量,在外部訪問不到,只能在內(nèi)部訪問。
定義:
$w: 100px;

使用:
width: $w;

父類選擇器

在SASS中,可以通過&符號,在父選擇器內(nèi)部訪問父選擇器。
經(jīng)常使用在偽類元素或偽樣式中

div {
    width: $w;
    height: $h;
    background: cyan;
    &:hover {
        background: khaki;
    }
}
屬性嵌套

Sass允許CSS屬性嵌套,通常這種特性應(yīng)用于復(fù)合屬性。對屬性嵌套,編譯的時候,這些屬性會根據(jù)嵌套層級來編譯結(jié)果。

$w: 100px;

div {
    width: $w;
    height: $w;
    background {
        color: pink;
    } 
    border: {
        style: solid;
        top: {
            width: 5px;
            color: tan;
        }
        left: {
            width: 2px;
            color: khaki;
        }
    }
}

編譯之后結(jié)果:

div {
  width: 100px;
  height: 100px;
  border-style: solid;
  border-top-width: 5px;
  border-top-color: tan;
  border-left-width: 2px;
  border-left-color: khaki; }
  div background {
    color: pink; }
混合

作用:繼承復(fù)用

定義:@mixin names {}
使用: @include names

$w: 200px;
$h: 100px;
$color: cyan; 

@mixin sayBor {
    width: $w;
    height: $h;
    background: $color;
}

.head {
    @include sayBor;
}
傳參

可以對混合進(jìn)行傳遞參數(shù),和設(shè)置默認(rèn)值。

@mixin sayBor($w: 300) {
    width: $w;
    height: $h;
    background: $color;
}

.head {
    @include sayBor(500);
}
多參數(shù)的使用

通過...語法實現(xiàn)

@mixin sayBor( $shadow...) {
    width: $w;
    height: $h;
    background: $color;
    box-shadow: $shadow;
}

.head {
    @include sayBor(2px 2px 10px red);
}

繼承

實現(xiàn)對 class, 元素, id 或者自定義元素名稱樣式繼承。

div {
    width: 100px;
}

myDiv {
    border: 1px solid tan;
}

#demo {
    height: 200px;
}

.app {
    background: tan;
}

p {
    @extend div;
    @extend myDiv;
    @extend #demo;
    @extend .app;
}
mixin與作用域

在sass中,定義在作用域內(nèi)部的混合,在外部是無法訪問的,只能在作用域內(nèi)部訪問
在sass中,定義在作用域內(nèi)部的繼承,在作用域外部是可以訪問的,并且會繼承整個文件中所有的選擇器的樣式,不論該選擇器寫在文件任何位置。編譯之后會帶有繼承的層級選擇器。

span {
    .app {
        background: tan;
    }
}

p {
    @extend .app; // 以繼承的為父級
}

編譯之后

span .app,
span p {
    background: tan;
}

比較Less 的Mixin 和 SASS的繼承:
Less中定義在作用域內(nèi)部的混合,在作用域外部是不能直接訪問。
SASS中定義在文件任何位置的繼承,都可以直接訪問。

比較Less的方法 和 SASS的Mixin
Less中定義在作用域內(nèi)部的方法,在作用域外部不能直接訪問,必須通過命名空間訪問。
SASS定義在作用域內(nèi)部的混合,只能在作用域內(nèi)部訪問,外部無法訪問。

占位符

編譯之后,樣式會刪除。占用SASS中的位置,使用其樣式內(nèi)容。

占位符,應(yīng)用于元素選擇器和自定義元素選擇器。

%div {
    width: 100px;
}

%myDiv {
    border: 1px solid tan;
}

#demo {
    height: 200px;
}

.app {
    background: tan;
}

p {
    @extend %div;
    @extend %myDiv;
    @extend #demo;
    @extend .app;
}

編譯結(jié)果:

p {
  width: 100px; }

p {
  border: 1px solid tan; }

#demo, p {
  height: 200px; }

.app, p {
  background: tan; }
運算

在sass中我們的運算是可以包含單位,此時我們的運算會對不同的單位做換算,通常默認(rèn)單位是px。
當(dāng)運算時,哪個單位在前面,得到結(jié)果就一哪個單位為最終單位。

在SASS中可以對CSS屬性值進(jìn)行運算。
除法元算特殊,因為CSS樣式中有 font 屬性樣式。

必須加上()

是變量或者函數(shù)返回的結(jié)果

除法是其它運算表達(dá)式中的一部分。

$w: 100px;

.box {
    width: $w;
    height: (100/2)px;  // 盡量不要使用數(shù)字相除,編譯之后單位與數(shù)字之間會有空格
    height: 100px+2px;
    font-size: round(5.5px)/2;
    padding: ($w/20)px; // 加上括號之后,不需要加單位,會補(bǔ)默認(rèn)單位,加上去變成  `px px` 
} 
色彩運算

在16進(jìn)制的色彩模式中,進(jìn)行運算時,是對每一個通道色彩多帶帶運算,每個通道大于255或者小于0時候不會影響其它的通道顏色值。
在rgba模式下,進(jìn)行色彩運算時,要求通明度必須保持一致,否則無法進(jìn)行運算。

background: #948204 + #325;
color: rgb(10, 20, 20) - rgb(22, 2, 8);
border: 1px solid rgba(20, 2, 10, .4) * rgba(10, 34, 2, .4);  

編譯之后:

    
background: #c7a459;
color: #00120c;
border: 1px solid rgba(200, 68, 20, 0.4);    

字符運算

+:字符串拼接。
注意:沒有""來表示字符串

$cur: -drop;
div {
    cursor: no + $cur;
}

插值

作用:動態(tài)創(chuàng)建一些值
語法:border-#{$key}

@mixin arrow ( $dir: top, $w: 1px, $c: #fff, $pos: absolute ) {
    position: $pos;
    border: $w solid transparent;
    border-#{$dir}: $w solid $c;
    font-size: 0;
}
if語句

語法:
通過@if定義if語句
通過@else if 定義else if 語句
通過@else 定義 else 語句

使用關(guān)鍵字: or, and :表示 ||&&

@mixin arrow ( $dir: top, $w: 1px, $c: #fff, $h: $w, $pos: absolute ) {
    border: $w solid transparent;
    
    @if $dir == top or $dir == bottom {
        border-left-width: $h;
        border-right-width: $h;
    } @else {
        border-top-width: $h;
        border-right-width: $h;
    }
    
    position: $pos;
    border-#{$dir}: $w solid $c;
    font-size: 0;
}
for循環(huán)

語法: @for $i form strat through end {}
$i:循環(huán)變量
start: 起始值,包括自身
end:終止值,包括自身

.box {
    height: 30px;
    margin-bottom: 10px;
}

@for $i from 1 through 16 {
    .item-#{$i} {
       background: #101 * ($i-1);     
    }
}
while循環(huán)

語法:@while 循環(huán)條件 {}

當(dāng)循環(huán)條件滿足時,會執(zhí)行該循環(huán)

$i: 1;
@while $i < 2 {
    .item-#{$i} {
        background: #111 * $i;
    }
    $i: $i + 2;
}
$j: 1;
@while $j < 21 {
    .col-lg-#{$i} {
        width: 100%/2 * $j;
    }
    $j: $j+1;
}
三元運算符

語法:通過if關(guān)鍵字實現(xiàn)。if(條件, true結(jié)果, false結(jié)果)

$isColor: true;
body {
    background: if( $isColor, green, blue );
}

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/111374.html

相關(guān)文章

  • CSS 強(qiáng)化裝備!Sass 安裝與使用

    摘要:不過必須要先安裝,然后再安裝。淘寶鏡像安裝由于國內(nèi)網(wǎng)絡(luò)原因你懂的,導(dǎo)致存放在上面的資源文件間歇性連接失敗。嵌套可以進(jìn)行選擇器的嵌套,表示層級關(guān)系。重要注釋管理項目文件結(jié)構(gòu)預(yù)處理器的特點之一是可以把你的代碼分割成很多文件,而且不會影響性能。 Sass 是什么? showImg(https://segmentfault.com/img/bVqyKF); Sass 是 Syntactical...

    wuyumin 評論0 收藏0
  • sass的基本使用

    摘要:本文所有的例子都是在中編譯,而可以自行編譯,具體可以查看該鏈接配置的概念定義是的一種預(yù)處理器,文件后綴名為,可以用中的來轉(zhuǎn)成樣式。 最近在項目中利用到了css預(yù)處理器(sass),而之前沒接觸過的本博主出于好奇心,就在業(yè)余的時間里搜了一些資料來看看,看完后覺得sass挺不錯,就想簡單的介紹一下sass的基本使用方法(ps:本文只介紹sass的一些基本使用,而這些內(nèi)容都是本博主覺得比較有...

    alighters 評論0 收藏0
  • Sass

    摘要:同樣的在下安裝有多種方法。這樣的文件,命名規(guī)范是以下劃線開頭的,這樣的文件不會被編譯成文件。這個特性現(xiàn)在正被眾多開發(fā)者濫用。就是取值的一種特殊形式,符合特殊用法。函數(shù)名稱參數(shù)列表數(shù)據(jù)處理繼承允許一個選擇器,繼承另一個選擇器。 sass介紹 ? SASS是一種CSS的開發(fā)工具,提供了許多便利的寫法,大大節(jié)省了設(shè)計者的時間,使得CSS的開發(fā),變得簡單且可維護(hù)。 ? SASS的本...

    StonePanda 評論0 收藏0
  • Sass

    摘要:同樣的在下安裝有多種方法。這樣的文件,命名規(guī)范是以下劃線開頭的,這樣的文件不會被編譯成文件。這個特性現(xiàn)在正被眾多開發(fā)者濫用。就是取值的一種特殊形式,符合特殊用法。函數(shù)名稱參數(shù)列表數(shù)據(jù)處理繼承允許一個選擇器,繼承另一個選擇器。 sass介紹 ? SASS是一種CSS的開發(fā)工具,提供了許多便利的寫法,大大節(jié)省了設(shè)計者的時間,使得CSS的開發(fā),變得簡單且可維護(hù)。 ? SASS的本...

    pcChao 評論0 收藏0
  • Sass

    摘要:同樣的在下安裝有多種方法。這樣的文件,命名規(guī)范是以下劃線開頭的,這樣的文件不會被編譯成文件。這個特性現(xiàn)在正被眾多開發(fā)者濫用。就是取值的一種特殊形式,符合特殊用法。函數(shù)名稱參數(shù)列表數(shù)據(jù)處理繼承允許一個選擇器,繼承另一個選擇器。 sass介紹 ? SASS是一種CSS的開發(fā)工具,提供了許多便利的寫法,大大節(jié)省了設(shè)計者的時間,使得CSS的開發(fā),變得簡單且可維護(hù)。 ? SASS的本...

    alexnevsky 評論0 收藏0
  • [Sass]-Sass入門

    摘要:未編譯樣式多繼承鏈?zhǔn)嚼^承占位選擇器編譯后樣式中使用聲明混合,可以傳遞參數(shù),參數(shù)名以符號開始,多個參數(shù)以逗號分開,也可以給參數(shù)設(shè)置默認(rèn)值。 初識Sass SASS簡介 sass是一種css預(yù)處理器,用專門的編程語言,進(jìn)行網(wǎng)頁樣式設(shè)計,然后再編譯成正常的CSS文件。Sass是CSS3的擴(kuò)展,它增加了嵌套規(guī)則,變量,mixins,選擇器繼承等等。Sass生成格式良好的CSS,使樣式表更易于組...

    godiscoder 評論0 收藏0

發(fā)表評論

0條評論

chanthuang

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<