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

資訊專欄INFORMATION COLUMN

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

?xiaoxiao, / 1134人閱讀

摘要：中的變量以開頭。中的引入文件以下劃線開頭，在其它文件中引用時，用命令即可，引用時不需要帶文件名開頭的下劃線和擴(kuò)展名。導(dǎo)入本身就提供了導(dǎo)入的選項，這樣就將進(jìn)一步分割成了代碼更少更容易維護(hù)的代碼段，但是在中每一條語句都會產(chǎn)生一次請求。

基礎(chǔ)知識

這部分內(nèi)容摘自 Sass Basics。

預(yù)處理 Preprocessing

預(yù)處理功能，就是將 SASS/SCSS 格式的文件輸出為 CSS 文件，可以對單個文件進(jìn)行預(yù)處理，也可以對指定目錄進(jìn)行預(yù)處理，還可以對指定目錄進(jìn)行實時監(jiān)控，基本語法如下：

sass input.scss output.css
sass --watch app/sass:public/stylesheets
變量 Variables

有了變量功能，就可以很方便地實現(xiàn)一處定義、多處使用，終于不用一遍遍地復(fù)制粘貼了。SASS 中的變量以 $ 開頭。

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

輸出后的 CSS 文件如下所示：

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
嵌套 Nesting

有了嵌套功能，可以更高效地書寫 CSS，不過嵌套的層數(shù)過多會使得代碼質(zhì)量嚴(yán)重下降，所以要嚴(yán)格控制嵌套的層數(shù)，以不超過三層為宜。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

處理后生成的 CSS 內(nèi)容如下：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
引入 Partials

引入文件與 C/C++ 中的頭文件很相似，都是把常用的代碼段保存至文件中，然后在其它文件中引用。SASS 中的引入文件以下劃線開頭：_partial.sass，在其它文件中引用時，用命令 @import partial 即可，引用時不需要帶文件名開頭的下劃線和擴(kuò)展名。

導(dǎo)入 Import

CSS 本身就提供了導(dǎo)入的選項，這樣就將 CSS 進(jìn)一步分割成了代碼更少、更容易維護(hù)的代碼段，但是在 CSS 中每一條 @import 語句都會產(chǎn)生一次 HTTP 請求。SASS 則在此基礎(chǔ)上進(jìn)一步做了改進(jìn)，每一個需要從別處導(dǎo)入內(nèi)容的 CSS 文件，SASS 都會將需要導(dǎo)入的內(nèi)容合并到當(dāng)前的 CSS 文件中，這樣就不會有 CSS 那樣產(chǎn)生額外的 HTTP 請求的情況了。

比如現(xiàn)在有一個引入文件 _reset.scss，在另一個文件 base.scss 中要引用它，兩個文件內(nèi)容如下所示：

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}
// base.scss

@import "reset";

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

經(jīng)過 SASS 處理后，最終的 CSS 文件如下：

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

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}
混合 Mixins

有時候同一個屬性為了考慮到瀏覽器兼容性，就需要寫好幾行類似的語句，如果這組屬性值還會經(jīng)常變，改動起來的工作量可就要了老命了。不過 SASS 提供了混合功能，就能夠讓我們“一次修改，整體更新”。這個混合功能，其實和常見的編程語言中的函數(shù)功能很相似，看代碼：

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

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

通過上面的代碼，就很容易能看明白混合是如何定義并被調(diào)用的，這里還用到了前面介紹的變量概念。最后生成的 CSS 如下所示：

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

這個示例代碼還涉及到了瀏覽器前綴這個概念，Vendor Prefix:為什么需要瀏覽器引擎前綴這篇文章也講了瀏覽器前綴的作用、適用情況及其用法，但是之后即將學(xué)習(xí)的 Gulp 可以集成 Autoprefixer，這樣就可以把補充瀏覽器前綴的工作交給自動化工具，所以在這里不再深入討論這個概念了。

繼承 Extend/Inheritance

繼承可是 SASS 中最常用的功能之一，通過 @extend 命令，可以將應(yīng)用于一個選擇器的屬性分享給另一個選擇器，這樣就可以進(jìn)一步簡化 SASS 的代碼了。比如下面的示例代碼先是創(chuàng)建了一個基礎(chǔ)的 message 選擇器，然后在此基礎(chǔ)上又創(chuàng)建了 success、error、warning 這三個“派生”的選擇器，它們仨共享 message 的屬性，同時各自又有不同的邊框?qū)傩浴?/p> 

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

并且最終生成的 CSS 代碼也很簡潔，怎么樣，很不錯吧？

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}
運算符 Operators

在 SASS 中，還可以進(jìn)行簡單的加減乘除以及取余這五種運算。

.container { width: 100%; }


article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

上面的代碼創(chuàng)建了一套基礎(chǔ)寬度為 960px 的流式網(wǎng)格（fluid grid），并且根據(jù)不同部分的寬度計算其對應(yīng)的百分比，所生成的 CSS 如下：

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

好了，基礎(chǔ)知識就講到這里了，現(xiàn)在就拿起自己的代碼來練習(xí)吧！

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

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

相關(guān)文章

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

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

    Jeff 評論0 收藏0

  • sass學(xué)習(xí)筆記--混合宏

    摘要：申明混合宏不帶參數(shù)混合宏在中，使用來聲明一個混合宏。如其中是用來聲明混合宏的關(guān)鍵詞，有點類似中的一樣。是混合宏的名稱。 什么時候使用混合宏 如果你的整個網(wǎng)站中有幾處小樣式類似，比如顏色，字體等，在 Sass 可以使用變量來統(tǒng)一處理，那么這種選擇還是不錯的。但當(dāng)你的樣式變得越來越復(fù)雜，需要重復(fù)使用大段的樣式時，使用變量就無法達(dá)到我們目了。這個時候 Sass 中的混合宏就會變得非常有意義。...

    Wildcard 評論0 收藏0

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

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

    simpleapples 評論0 收藏0

  • Laravel學(xué)習(xí)筆記三-前端工作流

    摘要：本節(jié)將學(xué)習(xí)是如何利用形成一套完整的前端工作流模式的。你也可以使用下面命令來強制安裝所有模塊，不管該模塊之前是否安裝過由于國內(nèi)墻的原因，使用安裝會非常緩慢，慢到想切，不過還好，我們可以使用淘寶提供的國內(nèi)鏡像進(jìn)行下載。 本節(jié)將學(xué)習(xí) Laravel 是如何利用 Sass, NPM, Gulp形成一套完整的前端工作流模式的。 一、句法強大的樣式表Sass Sass 是一種可用于編寫CSS的語言...

    liuchengxu 評論0 收藏0

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

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

    mcterry 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<