突然間就不怎么想用博客寫筆記了，想改用有道云筆記

sass

1 sass是一個css的預編譯程序， 是基于 ruby 的 2 先要去安裝 ruby 3 在命令行中， 執行以下兩句代碼（安裝sass的）， 連網操作的 gem install sass gem install compass sass安裝的文檔 https://www.sass.hk/install/

sass的編譯工具

Koala： 不支持中文路徑的文件夾 把文件夾放到一個英文的路徑下面 把項目文件夾拖入到kaola里， 就可以找到sass文件， 選中它， 執行編譯，就可以在css文件中， 生成正確的 css文件 在開發過程中， 要全程打開 koala， 每一次保存scss文件，都會自動編譯 在開發中， 如果使用sass， 就不要直接去修改css了

kaola在編譯sass時的輸出方式

1 nested： 編譯出縮進的css 2 expended: 編譯出平時我們看到的css的格式（在開發過程中使用） 3 compact： 將每個dom元素的css放在一行 4 compressed： 輸出一個壓縮版的css（項目上線之前使用）

Sass的基本使用

// 使用 import 進行合并 @import 'base.scss';/* 支持 css的 注釋 會被編譯過去 */ // 也支持這種 注釋 不會被編譯// 支持原生的 css寫法 body{background-color: skyblue;color:hotpink; }// 支持嵌套寫法 body{header{background-color: hotpink;div{color:skyblue;a{display: block;}}}// body添加偽元素 // 如果想要去掉生成的空格&::before{content:'';}// 子代元素 >.nav{background-color: hotpink;} }// 顏色的使用有多次 // 變量定義 : 賦值 $westFlowerGreen:hotpink; $minWidth:100px;.show-box{background-color: $westFlowerGreen;width:$minWidth;height: $minWidth*2;border-width: $minWidth - 30px;transform: translateX(100px); }

?Sass的高級語法

// 定義混入 @mixin 關鍵字 @mixin setSize($width,$height){width:$width;height:$height; }// 使用混入 @include 關鍵字 body{@include setSize(200px,300px); } // 一些 樣式類似 但是值不同的 代碼 抽取出來// 單獨封裝算法 可以使用 // 函數來實現 // 在關鍵字的前面需要添加@ @function bigger($size){@return $size*2; }div{// 使用的使用 跟 調用js的方法 十分類似width:bigger(100px);height: bigger(200px);font-size:bigger(10px); }

?

?

轉載于:https://www.cnblogs.com/DZzzz/p/8989947.html

總結

以上是生活随笔為你收集整理的sass预编译器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。