SCSS學習筆記（一）

simpleapples 發布于2019-08-29 16:37 / 2862人閱讀

摘要：的由來就是加強版的，要講那就一定要從講起英文全稱是一個最初由設計并由開發的層疊樣式表語言。年發行，年版本穩定，設計和開發分開進行，讓這個語言的功能相當完善。變量允許使用變量，所有變量以開頭。

SCSS的由來

SCSS就是加強版的CSS，要講SCSS那就一定要從SASS講起

SASS

Sass（英文全稱：Syntactically Awesome Stylesheets）是一個最初由Hampton Catlin設計并由Natalie Weizenbaum開發的層疊樣式表語言。2007年發行，2016年版本穩定，設計和開發分開進行，讓這個語言的功能相當完善。

Sass是像CSS一樣的層疊樣式表語言，但是它并不是由前端社區發明的，而是由Ruby社區發明創造，為什么Ruby社區要為前端創造語言，這是因為Ruby社區中有一個全棧Web框架Rails，這個框架包含前端和后端的開發，所以當Ruby社區的人發現CSS并不好用，就發明了一套語言叫做Sass，下面是Sass語法的特點

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

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

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

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

SCSS的用法

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

變量

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

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

有了變量，當需要集體修改色型的時候就會方便很多

嵌套

SCSS中允許嵌套，例如CSS中

div h1 {
　　color : red;
}

這樣的語法可以改寫成

div {
  h1 {
    color: red;
  }
}

mixin

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

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

使用@include引入這個代碼塊

div {
　　@include left;
}

編譯成CSS是這樣的

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

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

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

引入時，可以自己添加參數

div {
　　@include left(20px);
}

placeholder

一直引入代碼塊，編譯成CSS的時候還是會有很多的重復代碼，
使用placeholder可以節省代碼，用法是用%定義一個公用樣式

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

然后用@extend來調用

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

編譯成CSS時就是

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

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

GPU云服務器云服務器學習筆記一學習筆記基礎學習筆記深度學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113864.html

學習筆記 - Sass的安裝與使用手冊

摘要：現在將學習筆記整理在這里，供大家參考。的安裝的編輯器安裝方法有很多，大致能分為兩種應用程序和命令行界面。如果已經安裝過，也可以使用指令如果提示權限不足，在命令行前加上即可。參考網頁編輯器的使用的使用很簡單，記住兩條指令即可。最近因為工作需要，自學了Sass。現在將學習筆記整理在這里，供大家參考。 1. Sass的安裝 Sass的編輯器安裝方法有很多，大致能分為兩種：應用程序（appl...

Jeff 2019-08-29 16:57 評論0 收藏0
SASS 學習筆記

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

?xiaoxiao, 2019-08-30 13:04 評論0 收藏0
我的webpack學習筆記（二）

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

mcterry 2019-08-20 18:05 評論0 收藏0
我的webpack學習筆記（二）

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

awokezhou 2019-08-29 12:57 評論0 收藏0