SASS詳解

余學文發布于2019-08-29 11:29 / 2734人閱讀

摘要：以前看到之類的工具覺得應該比較難，今天接觸了之后發現挺好用的，主要是方便了的編寫。具體可以看慕課網教程編譯方法在命令行輸入編譯單個文件編譯整個文件夾到文件夾也就是這樣的語法下文中我都這樣寫。這里貼一張慕課網拿到的表格。

以前看到SASS之類的工具覺得應該比較難，今天接觸了之后發現挺好用的，主要是方便了CSS的編寫。在編寫比較大的項目的時候，由于內容很多，因此樣式表也會比較繁雜，如果要修改其中某一個的名字，就會維護起來很麻煩。因此才需要用到SASS這樣的工具來優化CSS結構。

一般有SCSS和SASS兩種，這兩種的文件后綴名是不一樣的，編寫起來也會有差異。由于SCSS的寫法更接近CSS，因此我比較喜歡SCSS的寫法。（SASS是沒有大括號的，僅僅用縮進來表示層次，這一點和python是很像的）

準備安裝

由于SCSS是需要編譯的。我就直接簡略關于編譯配置方法的環節。

安裝ruby。http://rubyinstaller.org/downloads

命令行安裝SASS。

安裝好了可以在命令行調用sass --version。如果顯示版本號就是安裝好啦。

具體可以看慕課網SASS教程

編譯方法

在命令行輸入

sass srcFile.scss:destFile.css//編譯單個文件
sass srcDir/:css/;//編譯整個srcDir文件夾到css文件夾

也就是sass [s]:[d]這樣的語法（下文中我都這樣寫）。

使用

剛剛是一些基本用法，還有一些參數可以用。

編譯參數 1.--watch

上面的寫法其實比較麻煩，因為我們一般寫css都是會反復修改的，那么我們每次改了SCSS都需要再次編譯，顯得很麻煩。因此我們可以使用--watch參數監視每一次的更改，這樣在修改CSS之后都會自動編譯。具體如下：

sass --watch [src]:[dest];//src和dest既可以是文件也可以是文件夾

如果我們修改了SCSS，控制臺就會輸出

 Change detected to: scss/test.scss
      write scss/css/test.css
      write scss/css/test.css.map

2. style

由于不同的同學寫CSS都有自己的習慣，因此這個參數就是為了讓編譯后的CSS更美觀。
語法是sass --watch [src]:[dest] --style property這個property就是下面描述的內容。

nested

默認就是nested編譯結果是最常見的書寫方法。

body{
    p{
        color:red;
    }
    ul{
        background-color:green;
    }
}

編譯結果

body p{
    color:red;}
body ul{
    background-color:green;}

expanded

就是編譯出來的右大括號會另起一行

compact

輸出的css會少很多換行

compressed

沒有空格沒有換行

.box,.size{margin-left:5px}

變量

SASS類似與一些編程語言。會先定義一些變量并給他們賦值，然后再在樣式表中調用。這樣我們在維護CSS的時候就只需要把這些變量的值修改就可以了，比較方便。廢話不多說直接看代碼：

$varGlobal:500px;
.container{
    $varLocal:20px;
    width:$varGlobal;
    height:$varLocal;
}

看上面的代碼就知道，SASS引入了局部變量和全局變量，和其他語言用法差不多的就不贅述了。

嵌套

先前已經提到了結構的嵌套。還支持屬性嵌套和偽類嵌套。

屬性嵌套

比如font就有很多屬性：font-size、font-weight等。我們可以這樣嵌套

font:{
    size://
    weight://
}

注意font后面有一個冒號，不然就和結構嵌套是一樣的了

偽類嵌套

.clearfix{
    &:before,
    &:after {
        content:"";
        display: table;
      }
    &:after {
        clear:both;
        overflow: hidden;
      }
}

用法就是加一個&:
調用混合宏

混合宏

感覺這個是SASS的比較強大的地方，先看代碼

@mixin border-radius{
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
button {
    @include border-radius;
}

這時候編譯結果為

button {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

相當于就是一個代碼塊的調用。另外混合宏還可以傳入參數

@mixin border-radius($radius){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

相當于是一個函數的寫法了。在調用的時候傳入參數即可

.box {
  @include border-radius(3px);
}

還可以給默認值

@mixin border-radius($radius：3px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

注意css中都是用冒號表示相等。不用等號

帶@的語句一般都不加冒號，直接空格

繼承

.size{
    background-color:#777;
}
.box{
    @extend .size;
}

占位符

%placeholder

這種寫法在不調用之前不會產生任何css代碼。我個人感覺比較像是一個基類。用法就是和繼承一樣的。

.body{
    @extend %placeholder
}

這里貼一張慕課網拿到的表格。

SASS基礎就先寫到這里，還有很多高級用法以后再補充~

GPU云服務器云服務器 sass 多云管理 sass sass 混合云部署 iaas paas sass

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

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

資源集 - 收藏集 - 掘金

摘要：行爬取頂點全網任意小說掘金之前連續多篇文章介紹客戶端爬取平臺，今天我們從零開始，實現爬取頂點小說網任意一本小說的功能。文件標記所有文件我的后端書架后端掘金我的后端書架月前本書架主要針對后端開發與架構。 30行js爬取頂點全網任意小說 - 掘金之前連續多篇文章介紹客戶端爬取平臺(dspider)，今天我們從零開始，實現爬取頂點小說網任意一本小說的功能。如果你還不知道客戶端爬取，可以先看...

stdying 2019-07-25 12:06 評論0 收藏0
資源集 - 收藏集 - 掘金

摘要：行爬取頂點全網任意小說掘金之前連續多篇文章介紹客戶端爬取平臺，今天我們從零開始，實現爬取頂點小說網任意一本小說的功能。文件標記所有文件我的后端書架后端掘金我的后端書架月前本書架主要針對后端開發與架構。 30行js爬取頂點全網任意小說 - 掘金之前連續多篇文章介紹客戶端爬取平臺(dspider)，今天我們從零開始，實現爬取頂點小說網任意一本小說的功能。如果你還不知道客戶端爬取，可以先看...

馬忠志 2019-08-15 10:42 評論0 收藏0
CSS Modules詳解及React中實踐

摘要：上例中打印的結果是對中的名都做了處理，使用對象來保存原和混淆后的對應關系。結合實踐在處直接使用中名即可。如因為只會轉變類選擇器，所以這里的屬性選擇器不需要添加。 showImg(http://gtms01.alicdn.com/tps/i1/TB15w0HLpXXXXbdaXXXjhvsIVXX-600-364.png); CSS 是前端領域中進化最慢的一塊。由于 ES2015/201...

wemall 2019-08-30 15:45 評論0 收藏0
從基礎到實戰手摸手帶你掌握新版Webpack4.0詳解一起讀文檔

摘要：構建構建就是把源代碼轉換成發布到線上的可執行代碼，包括如下內容。自動刷新監聽本地源代碼的變化，自動重新構建刷新瀏覽器。自動發布更新完代碼后，自動構建出線上發布代碼并傳輸給發布系統。將文件放入到項目中，在中新建一個放字體圖標的文件夾。項目地址 github.com/wudiufo/Web… 知識點概覽： Loader，HMR ,Create React App, Caching, Plug...

王軍 2019-05-23 17:31 評論0 收藏0
webpack4配置詳解之逐行分析

摘要：今天就嘗試著一起來聊聊吧，旨在幫大家加深理解新手更容易上路，都能從到搭建配置自定屬于自己的腳手架，或對已封裝好的腳手架有進一步的鞏固，接下來蘇南會詳細講解中的每一個配置字段的作用部分為新增。 showImg(https://segmentfault.com/img/bVbjmMV?w=1008&h=298); 前言　　經常會有群友問起webpack、react、redux、甚至cre...

dkzwm 2019-08-23 13:04 評論0 收藏0