成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

SCSS學(xué)習(xí)筆記（一）

simpleapples / 2877人閱讀

摘要：的由來就是加強(qiáng)版的，要講那就一定要從講起英文全稱是一個(gè)最初由設(shè)計(jì)并由開發(fā)的層疊樣式表語言。年發(fā)行，年版本穩(wěn)定，設(shè)計(jì)和開發(fā)分開進(jìn)行，讓這個(gè)語言的功能相當(dāng)完善。變量允許使用變量，所有變量以開頭。

SCSS的由來

SCSS就是加強(qiáng)版的CSS，要講SCSS那就一定要從SASS講起

SASS

Sass（英文全稱：Syntactically Awesome Stylesheets）是一個(gè)最初由Hampton Catlin設(shè)計(jì)并由Natalie Weizenbaum開發(fā)的層疊樣式表語言。2007年發(fā)行，2016年版本穩(wěn)定，設(shè)計(jì)和開發(fā)分開進(jìn)行，讓這個(gè)語言的功能相當(dāng)完善。

Sass是像CSS一樣的層疊樣式表語言，但是它并不是由前端社區(qū)發(fā)明的，而是由Ruby社區(qū)發(fā)明創(chuàng)造，為什么Ruby社區(qū)要為前端創(chuàng)造語言，這是因?yàn)镽uby社區(qū)中有一個(gè)全棧Web框架Rails，這個(gè)框架包含前端和后端的開發(fā)，所以當(dāng)Ruby社區(qū)的人發(fā)現(xiàn)CSS并不好用，就發(fā)明了一套語言叫做Sass，下面是Sass語法的特點(diǎn)

#sidebar
  width: 30%
  background-color: #faa

Sass語法如上圖所示，它寫法極簡，省略掉了大括號(hào)和分號(hào)，但是和python一樣，縮進(jìn)需要嚴(yán)格按照規(guī)定，這樣子的語法讓很多前端工程師很不適應(yīng)，所以出現(xiàn)了了SCSS，SCSS將括號(hào)分號(hào)又給添加回來了，例如

#sidebar {
  width: 30%;
  background-color: #faa;
}

你肯定想說，這樣又和CSS有什么區(qū)別，實(shí)際上SCSS保留了SASS的其他部分功能

SCSS的用法

SCSS相較于CSS加入了編程元素，作為CSS的預(yù)處理器，它的基本思想是，用一種專門的編程語言，進(jìn)行網(wǎng)頁樣式設(shè)計(jì)，然后再編譯成正常的CSS文件。

變量

SCSS允許使用變量，所有變量以$開頭。

$blue : #1875e7;　
div {
　color : $blue;
}

有了變量，當(dāng)需要集體修改色型的時(shí)候就會(huì)方便很多

嵌套

SCSS中允許嵌套，例如CSS中

div h1 {
　　color : red;
}

這樣的語法可以改寫成

div {
  h1 {
    color: red;
  }
}
mixin

mixin可以聲明重用一個(gè)代碼塊，例如
使用@mixin定義一個(gè)代碼塊

@mixin left {
　　float: left;
　　margin-left: 10px;
}

使用@include引入這個(gè)代碼塊

div {
　　@include left;
}

編譯成CSS是這樣的

div {
　　float: left;
　　margin-left: 10px;
}

另外，mixin支持參數(shù)，可以像寫函數(shù)一樣寫CSS，例如

@mixin left($value: 10px) {//默認(rèn)是10px
　　float: left;
　　margin-right: $value;
}

引入時(shí)，可以自己添加參數(shù)

div {
　　@include left(20px);
}
placeholder

一直引入代碼塊，編譯成CSS的時(shí)候還是會(huì)有很多的重復(fù)代碼，
使用placeholder可以節(jié)省代碼，用法是用%定義一個(gè)公用樣式

%box {
  float: left;
  margin-left: 10px;
}

然后用@extend來調(diào)用

.selector { 
  @extend %box; 
}
.nav>ol>li {
  @extend %box;
}

編譯成CSS時(shí)就是

.selector,
.nav>ol>li {
  float: left;
  margin-left: 10px;
}

不拷貝樣式，把選擇器提到了樣式前面

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113864.html

相關(guān)文章

  • 學(xué)習(xí)筆記 - Sass的安裝與使用手冊(cè)

    摘要：現(xiàn)在將學(xué)習(xí)筆記整理在這里，供大家參考。的安裝的編輯器安裝方法有很多，大致能分為兩種應(yīng)用程序和命令行界面。如果已經(jīng)安裝過，也可以使用指令如果提示權(quán)限不足，在命令行前加上即可。參考網(wǎng)頁編輯器的使用的使用很簡單，記住兩條指令即可。 最近因?yàn)楣ぷ餍枰詫W(xué)了Sass?，F(xiàn)在將學(xué)習(xí)筆記整理在這里，供大家參考。 1. Sass的安裝 Sass的編輯器安裝方法有很多，大致能分為兩種：應(yīng)用程序（appl...

    Jeff 評(píng)論0 收藏0

  • SASS 學(xué)習(xí)筆記

    摘要：中的變量以開頭。中的引入文件以下劃線開頭，在其它文件中引用時(shí)，用命令即可，引用時(shí)不需要帶文件名開頭的下劃線和擴(kuò)展名。導(dǎo)入本身就提供了導(dǎo)入的選項(xiàng)，這樣就將進(jìn)一步分割成了代碼更少更容易維護(hù)的代碼段，但是在中每一條語句都會(huì)產(chǎn)生一次請(qǐng)求。 基礎(chǔ)知識(shí) 這部分內(nèi)容摘自 Sass Basics。 預(yù)處理 Preprocessing 預(yù)處理功能，就是將 SASS/SCSS 格式的文件輸出為 CSS 文...

    ?xiaoxiao, 評(píng)論0 收藏0

  • 我的webpack學(xué)習(xí)筆記（二）

    前言 上一篇文章我們講了多頁面js的打包，本篇文章我們繼續(xù)scss的打包。 多頁面css單獨(dú)打包 首先，我們css編寫采用的是sass，所以我們先來安裝sass-loader以及可以用到的依賴 $ npm install sass-loader node-sass css-loader style-loader --save-dev 安裝完loaders，下面在webpack.config.js...

    mcterry 評(píng)論0 收藏0

  • 我的webpack學(xué)習(xí)筆記（二）

    前言 上一篇文章我們講了多頁面js的打包，本篇文章我們繼續(xù)scss的打包。 多頁面css單獨(dú)打包 首先，我們css編寫采用的是sass，所以我們先來安裝sass-loader以及可以用到的依賴 $ npm install sass-loader node-sass css-loader style-loader --save-dev 安裝完loaders，下面在webpack.config.js...

    awokezhou 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<