博客 / 詳情

返回

Y分鐘速成Sass

源代碼下載： learnsass-cn.scss

Sass是一種CSS擴展語言，它增加了諸如變量、嵌套、mixin等功能。
Sass(以及其它預處理器，如Less等) 能幫助開發人員編寫易維護和 DRY (Don't Repeat Yourself)的代碼。

Sass有兩種不同的語法可選用。SCSS的語法和CSS的相同，但增加了Sass的額外功能。或者Sass（原來的語法），它使用縮進而非大括號和分號。

本教程使用SCSS編寫。

如果你已熟悉CSS3，你可能相對能較快地掌握Sass。它並沒有提供任何新的類型屬性，而只是提供了一些工具使你能更高效的編寫CSS，並且使維護更加容易。



// 單行註釋當Sass被編譯成CSS後會被刪除。

/* 多行註釋將保留. */

/* 變量
============================== */



/* 你可以將一個CSS值（如一個顏色值）保存到變量中。
使用'$'符號來創建一個變量。*/

$primary-color: #A3A4FF;
$secondary-color: #51527F;
$body-font: 'Roboto', sans-serif;

/* 你可以在你的樣式文件中使用變量。
   現在假如你想修改顏色，你只需修改一次即可。*/

body {
    background-color: $primary-color;
    color: $secondary-color;
    font-family: $body-font;
}

/* 以上將編譯成： */
body {
    background-color: #A3A4FF;
    color: #51527F;
    font-family: 'Roboto', sans-serif;
}

/* 相比於在你的樣式文件中逐個進行修改，這種方式維護性更好。 */



/* 控制指令
============================== */

/* Sass允許你使用@if, @else, @for, @while, 和 @each 來控制
   你的代碼如何編譯成CSS */

/* @if/@else塊的行為和你可能預想的會完全相同 */

$debug: true !default;

@mixin debugmode {
    @if $debug {
        @debug "Debug mode enabled";

        display: inline-block;
    }
    @else {
        display: none;
    }
}

.info {
    @include debugmode;
}

/* 如果$debug設置為了true, .info 將會顯示; 如果設置為false那麼
   .info 將不顯示。

注意： @debug將在命令行中輸出調試信息。
在調試你的SCSS時它對於檢查變量很有用。*/

.info {
    display: inline-block;
}

/* @for是控制循環，它能遍歷區間值。
它對於設置一組元素的類型特別有用。
有兩種形式，"through"和"to"。前者包括最末那個值，
而後者止於最末那個值。 
*/

@for $c from 1 to 4 {
    div:nth-of-type(#{$c}) {
        left: ($c - 1) * 900 / 3;
    }
}

@for $c from 1 through 3 {
    .myclass-#{$c} {
        color: rgb($c * 255 / 3, $c * 255 / 3, $c * 255 / 3);
    }
}

/* 將編譯成: */

div:nth-of-type(1) {
    left: 0;
}

div:nth-of-type(2) {
    left: 300;
}

div:nth-of-type(3) {
    left: 600;
}

.myclass-1 {
    color: #555555;
}

.myclass-2 {
    color: #aaaaaa;
}

.myclass-3 {
    color: white;
// SASS automatically converts #FFFFFF to white
}

/* @while也非常直白： */

$columns: 4;
$column-width: 80px;

@while $columns > 0 {
    .col-#{$columns} {
        width: $column-width;
        left: $column-width * ($columns - 1);
    }

    $columns: $columns - 1;
}

/* 將輸出以下CSS: */

.col-4 {
    width: 80px;
    left: 240px;
}

.col-3 {
    width: 80px;
    left: 160px;
}

.col-2 {
    width: 80px;
    left: 80px;
}

.col-1 {
    width: 80px;
    left: 0px;
}

/* @each函數類似@for, 除了它使用一個列表而不是序列值
注意: 你指定列表的方式和指定其它變量一樣，
用空格作為分隔符。 */

$social-links: facebook twitter linkedin reddit;

.social-links {
    @each $sm in $social-links {
        .icon-#{$sm} {
            background-image: url("images/#{$sm}.png");
        }
    }
}

/* 將輸出: */

.social-links .icon-facebook {
    background-image: url("images/facebook.png");
}

.social-links .icon-twitter {
    background-image: url("images/twitter.png");
}

.social-links .icon-linkedin {
    background-image: url("images/linkedin.png");
}

.social-links .icon-reddit {
    background-image: url("images/reddit.png");
}


/* Mixins
==============================*/

/* 如果你發現你要為多個元素編寫相同的代碼，
你可能想將那些代碼保存到一個mixin中。

使用'@mixin'指令，再為你的mixin加上一個名稱。*/

@mixin center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

/* 你可以通過'@include'及mixin名來調用mixin。 */

div {
    @include center;
    background-color: $primary-color;
}

/* 將編譯成: */
div {
    display: block;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    background-color: #A3A4FF;
}

/* 你可以使用mixin來創建一個快捷屬性。*/

@mixin size($width, $height) {
    width: $width;
    height: $height;
}

/* 你可以通過傳入width和height參數來調用它。*/

.rectangle {
    @include size(100px, 60px);
}

.square {
    @include size(40px, 40px);
}

/* 編譯成: */
.rectangle {
  width: 100px;
  height: 60px;
}

.square {
  width: 40px;
  height: 40px;
}



/* 函數
============================== */



/* Sass提供的函數可以用來完成各種各樣的任務。
   考慮以下情況 */

/* 函數可以通過其名稱及傳入其所需的參數來調用 */
body {
  width: round(10.25px);
}

.footer {
  background-color: fade_out(#000000, 0.25);
}

/* 編譯成: */

body {
  width: 10px;
}

.footer {
  background-color: rgba(0, 0, 0, 0.75);
}

/* 你也可以定義你自己的函數。函數非常類似於mixin。
   當你在函數和mixin之間抉擇時，記住mixin最適合於創建CSS而函數更適合於
   處理那些可能在你的Sass代碼中使用的邏輯。'數學運算符'部分的例子
   是轉成可重用函數的最理想選擇。 */

/* 該函數將接收一個目標尺寸大小和父結點尺寸大小，然後計算並
    返回百分數 */

@function calculate-percentage($target-size, $parent-size) {
  @return $target-size / $parent-size * 100%;
}

$main-content: calculate-percentage(600px, 960px);

.main-content {
  width: $main-content;
}

.sidebar {
  width: calculate-percentage(300px, 960px);
}

/* 編譯成: */

.main-content {
  width: 62.5%;
}

.sidebar {
  width: 31.25%;
}



/* 擴展 (繼承)
============================== */



/* 擴展是在選擇子間共享屬性的一種方法。 */

.display {
    @include size(5em, 5em);
    border: 5px solid $secondary-color;
}

.display-success {
    @extend .display;
    border-color: #22df56;
}

/* 編譯成: */
.display, .display-success {
  width: 5em;
  height: 5em;
  border: 5px solid #51527F;
}

.display-success {
  border-color: #22df56;
}

/* 擴展一條CSS語句優於創建一個mixin，
   這是由Sass組合所有共享相同基樣式的類的方式決定的。
   如果使用mixin完成，width, height, 和border將會在
   調用了該mixin的每條語句中重複。雖然它不至於會影響你的工作流，
   但它會在由Sass編譯器生成的的文件中添加不必要的代碼。*/


/* 嵌套
============================== */



/* Sass允許在選擇子中嵌套選擇子 */

ul {
    list-style-type: none;
    margin-top: 2em;

    li {
        background-color: #FF0000;
    }
}

/* '&'將被父選擇子替換。*/
/* 你也可以嵌套偽類。 */
/* 注意過度嵌套將導致你的代碼難以維護。
最佳實踐推薦在嵌套時不超過3層。
例如： */

ul {
    list-style-type: none;
    margin-top: 2em;

    li {
        background-color: red;

        &:hover {
          background-color: blue;
        }

        a {
          color: white;
        }
    }
}

/* 編譯成： */

ul {
  list-style-type: none;
  margin-top: 2em;
}

ul li {
  background-color: red;
}

ul li:hover {
  background-color: blue;
}

ul li a {
  color: white;
}



/* 片段與導入
============================== */



/* Sass允許你創建片段文件。它有助於你的Sass代碼保持模塊化。
   片段文件應該以 '_' 開頭，例如 _reset.css。
   片段不會輸出到CSS中。*/

/* 考慮以下的CSS，我們會將它們放入一個叫作_reset.css的文件中 */

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

/* Sass提供的@import能用來將片段導入到文件中。
   它與傳統的CSS @import語句不同，不需要通過
   另外的HTTP請求來獲取導入的文件。
   Sass提取導入文件並將它與編譯後的代碼結合起來。 */

@import 'reset';

body {
  font-size: 16px;
  font-family: Helvetica, Arial, Sans-serif;
}

/* 編譯成: */

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font-size: 16px;
  font-family: Helvetica, Arial, Sans-serif;
}



/* 佔位符選擇子
============================== */



/* 佔位符在創建用於擴展的CSS語句時非常有用。
   如果你想創建一條只通過@extend使用的CSS語句，你可以利用佔位符來實現。
   佔位符以'%'而非'.'或'#'開頭。佔位符不會出現在編譯後的CSS中 */

%content-window {
  font-size: 14px;
  padding: 10px;
  color: #000;
  border-radius: 4px;
}

.message-window {
  @extend %content-window;
  background-color: #0000ff;
}

/* 編譯成: */

.message-window {
  font-size: 14px;
  padding: 10px;
  color: #000;
  border-radius: 4px;
}

.message-window {
  background-color: #0000ff;
}



/* 數學運算
============================== */



/* Sass提供以下的運算符: +, -, *, /, 和 %。它們
   相比於使用你事先手工計算好了的數值，它們
   對於直接在你的Sass文件中計算數值很有用。
   以下是設置一個簡單的兩列設計的例子。*/

$content-area: 960px;
$main-content: 600px;
$sidebar-content: 300px;

$main-size: $main-content / $content-area * 100%;
$sidebar-size: $sidebar-content / $content-area * 100%;
$gutter: 100% - ($main-size + $sidebar-size);

body {
  width: 100%;
}

.main-content {
  width: $main-size;
}

.sidebar {
  width: $sidebar-size;
}

.gutter {
  width: $gutter;
}

/* 編譯成： */

body {
  width: 100%;
}

.main-content {
  width: 62.5%;
}

.sidebar {
  width: 31.25%;
}

.gutter {
  width: 6.25%;
}

SASS還是Sass?

該語言的名字，“Sass”，是一個詞，不是一個縮寫。
你有沒想過Sass是否是一個縮寫詞？你可能沒有，但我反正會告訴你。
該語言的名字是一個單詞，不是一個縮寫詞。
由於人們老是將它寫成"SASS"，語言的作者開玩笑地稱它為"Syntactically Awesome StyleSheets"。

實踐Sass

如果你想在你的瀏覽器中嘗試Sass，參閲SassMeister。
你可以選用任一種語法，只需進到設置頁然後選擇Sass或SCSS。

兼容性

Sass可以用於任何項目中，只要你有程序能將它編譯成CSS即可。你還需要驗證你所使用的CSS是否與你的目標瀏覽器兼容。

QuirksMode CSS和CanIUse對於檢查兼容性來説都是不錯的資源。

延伸閲讀資料

  • Official Documentation
  • The Sass Way 上提供了教程(初學者-高級)和文章。

有建議？或者發現什麼錯誤？在Github上開一個issue，或者發起pull request！

原著Laura Kyle，並由2個好心人修改。
Translated by: Jiang Haiyun
© 2022 Laura Kyle, Sean Corrales, Kyle Mendes, Keith Miyake
本作品採用 CC BY-SA 3.0 協議進行許可。

sass , css3 , mixin , 入門 , Css
user avatar kandole 頭像 zuckjet 頭像 yumiko_5c088de8aa1fe 頭像 codinger 頭像 wangji_5d01acdfdd139 頭像
5 位用戶收藏了這個故事！

發佈 評論

Some HTML is okay.