CSS、Sass、Scss，以及sass和scss的區別

時間  2019-12-04
標籤 css sass scss 以及 區別 欄目 CSS 简体版
原文   原文鏈接

一、描述

  • CSS 指層疊樣式表 (Cascading Style Sheets)
  • Sass (Syntactically Awesome StyleSheets)，是由buby語言編寫的一款css預處理語言，和html同樣有嚴格的縮進風格，和css編寫規範有着很大的出入，是不使用花括號和分號的，因此不被廣爲接受。 Sass 是一款強化 CSS 的輔助工具，是對 CSS 的擴展，它在 CSS 語法的基礎上增長了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、繼承(extend)、導入 (inline imports) 等高級功能，這些拓展令 CSS 更增強大與優雅。使用 Sass 以及 Sass 的樣式庫（如 Compass）有助於更好地組織管理樣式文件，以及更高效地開發項目， 其後綴是.sass。
  • SCSS (Sassy CSS)，一款css預處理語言，SCSS 是 Sass 3 引入新的語法，其語法徹底兼容 CSS3，而且繼承了 Sass 的強大功能。也就是說，任何標準的 CSS3 樣式表都是具備相同語義的有效的 SCSS 文件。SCSS 須要使用分號和花括號而不是換行和縮進。SCSS 對空白符號不敏感，其實就和css3語法同樣，其後綴名是分別爲 .scss。

二、css

如下是部門經常使用知識點：css

CSS的書寫方式

行內式：將CSS代碼書寫在HTML標籤的style屬性中。style是一個通用屬性，每個標籤裏面都擁有這個屬性，規則：
                                                        <標籤名  style=」屬性:值;屬性:值;」></標籤名>
    嵌入式：將CSS代碼嵌入到HTML文件中，嵌入式是經過HTML中的<style>標籤將CSS代碼嵌入到HTML網頁中，規則：
                                                                    <style  type=」text/css」>
                                                                              /*書寫CSS代碼*/
                                                                              選擇器{屬性:值;屬性:值;}
                                                                    </style>
   外鏈式：寫以.css擴展名的文件，而後在<head></head>標籤中使用<link />標籤，將css文件連接到html文件中，規則：
                                                             <標籤名  style=」屬性:值;屬性:值;」></標籤名>

選擇器

元素選擇器、id選擇器、類選擇器、
      屬性選擇器(如爲帶有 title 屬性的全部元素設置樣式 [title] {somestyles} )、
      屬性和值選擇器(如爲帶有 title="hello title" 的全部元素設置樣式 [title=W3School] {somestyles} )、
      派生選擇器(經過依據元素在其位置的上下文關係來定義樣式)，有三種
          後代選擇器：    空格隔開;
          子元素選擇器：  >隔開，只能選擇做爲某元素子元素的元素;
          相鄰兄弟選擇器：選擇緊接在一元素後的元素，且兩者有相同父元素,
                         如設置緊接 h1 後出現的 p 的字體顏色：h1 + p {color: red;};
          注1：.a,.b該逗號表示存在其中一個類的元素就設置，多元選擇；
          注1：.a.b沒有空格表示同時擁有兩個類的元素。

盒子模型

全部HTML元素能夠看做盒子，CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，
       它包括：margin(外邊距)、border(邊框)、padding(內邊距)、content(內容)
       盒模型容許咱們在其它元素和周圍元素邊框之間的空間放置元素。

定位

Position屬性：規定元素的定位類型。即元素脫離文檔流的佈局，在頁面的任意位置顯示
      absolute： 絕對定位；脫離文檔流的佈局，遺留下來的空間由後面的元素填充。
                 定位的起始位置爲最近的父元素(postion不爲static)，不然爲Body文檔自己。
      relative ：相對定位；不脫離文檔流的佈局，只改變自身的位置，在文檔流原先的位置遺留空白區域。
                 定位的起始位置爲此元素原先在文檔流的位置。
      fixed ：固定定位；相似於absolute，但不隨着滾動條的移動而改變位置。
      static ：默認值；默認佈局.
      輔助屬性：position屬性只是使元素脫離文檔流，要想此元素能按照但願的位置顯示，
               須要使用下面的屬性(position:static不支持這些)：
                ①left ： 表示向元素的左邊插入多少像素，使元素向右移動多少像素。
                ②right ：表示向元素的右邊插入多少像素，使元素向左移動多少像素。
                ③top ：表示向元素的上方插入多少像素，使元素向下移動多少像素。
                ④bottom ：表示向元素的下方插入多少像素，使元素向上移動多少像素。
                注：上面屬性的值能夠爲負，單位：px 。

佈局

(省略......)html

三、sass、scss、和css的關係

css預處理器

css預處理器是用一種專門的語言，進行網頁的樣式設計，以後在被編譯爲正常的css文件，以供項目使用。使用css預處理語言的好處：是css更加簡潔、方便修改、可讀性強、適應新強而且更易於代碼的維護。

css和sass的關係

sass是由buby語言編寫的一款css預處理語言，和html同樣有嚴格的縮進風格，和css編寫規範有着很大的出入，是不使用花括號和分號的，因此不被廣爲接受。

scss和css的關係

SCSS 和 CSS 寫法無差異，這也是 Sass 後來愈來愈受大衆喜歡緣由之一。簡單點說，把你現有的「.css」文件直接修改爲「.scss」便可使用。

sass和scss的關係

sass和scss實際上是同樣的css預處理語言，SCSS 是 Sass 3 引入新的語法，其後綴名是分別爲 .sass和.scss兩種。
SASS版本3.0以前的後綴名爲.sass，而版本3.0以後的後綴名.scss。
二者是有不一樣的，繼sass以後scss的編寫規範基本和css一致，sass時代是有嚴格的縮進規範而且沒有‘{}’和‘；’。
而scss則和css的規範是一致的。

示例代碼

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

四、sass

直接跳過

五、scss

scss 註釋

多行註釋 - 這些使用 /**/ 寫入。多行註釋都保留在CSS輸出。
        單行註釋 - 這些是使用 // 跟着註釋。單行註釋不會保留在CSS輸出。

變量

$ 符號來標識變量；把反覆使用的css屬性值定義成變量；

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color; // 變量中可存在變量

$link-color: blue;
a {
  color: $link_color; // 中劃線和下劃線等價，包括對混合器和Sass函數的命名
}

$side : left;
.rounded {
  border-#{$side}-radius: 5px; // 若是變量須要鑲嵌在字符串之中，就必須須要寫在#{}之中。
}

$nav-color: #F90;// 當前樣式表均可以使用
nav {
  $width: 100px; // 只有nav{}裏面纔可使用，當前樣式表其餘地方能夠重複定義和使用
  width: $width;
  color: $nav-color;
}
//編譯後
nav {
  width: 100px;
  color: #F90;
}

嵌套

選擇器嵌套
#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}
 /* 編譯後 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

屬性也能夠嵌套，好比border-color屬性，能夠寫成：
p {
    border: {   // 注意，border後面必須加上冒號。
        color: red;
    }
}

在嵌套的代碼塊內，可使用&引用父元素。好比a:hover僞類，能夠寫成
a {
    &:hover { color: #ffb3ff; } }

計算功能

全部數據類型均支持相等運算 == 或 !=，此外，每種數據類型也有其各自支持的運算方式。

數字運算: 支持數字的加減乘除、取整等運算 (+, -, *, /, %)
$var: 20px;
body {
  margin: (14px/2);
  top: 50px + 100px;
  right: $var * 10%;}

字符串運算： + 可用於鏈接字符串
注意，若是有引號字符串（位於 + 左側）鏈接無引號字符串，運算結果是有引號的，
相反，無引號字符串（位於 + 左側）鏈接有引號字符串，運算結果則沒有引號
p {cursor: e + -resize;} //編譯後 p {cursor: e-resize; }
p:before { 
    content: "Foo " + Bar;  
    font-family: sans- + "serif";}
// 編譯爲
p:before {
  content: "Foo Bar";
  font-family: sans-serif; }

代碼的重用

繼承

繼承是基於類class的（有時是基於其餘類型的選擇器）
容許一個選擇器，繼承另外一個選擇器。好比，現有class1：
.class1 {
border: 1px solid #ddd;}

// class2要繼承class1，就要使用@extend命令：

.class2 {
     @extend .class1;
     font-size:120%;
 }

混合器 Mixin

避免不停地重複一段樣式 
// 使用@mixin命令，定義一個代碼塊。
　　@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}
    //使用@include命令，調用這個mixin。
　　div {
　　　　@include left;
　　}
　　
　　// mixin的強大之處，在於能夠指定參數和缺省值。
　　@mixin left($value: 10px) {
　　    float: left;
　　    margin-right: $value;
　　}
    // 使用的時候，根據須要加入參數：
　　div {
　　　　@include left(20px);
　　}

插入文件

Sass 拓展了 @import 的功能，容許其導入 SCSS 或 Sass 文件。被導入的文件將合併編譯到同一個 CSS 文件中，另外， 被導入的文件中所包含的變量或者混合指令 (mixin) 均可以在導入的文件中使用。 
@import "foo.scss"; //都會導入文件 foo.scss
    @import "foo"; //都會導入文件 foo.scss
    @import "http://foo.com/bar";  // 插入外部文件
    @import "foo.css"; // 等同於css的import命令。

高級用法

好比控制指令，條件語句、循環語句、自定義函數等，這部分就不列出來了。

scss總結

這裏只是簡單介紹 scss 最基本部分,使用 scss 能夠編寫清晰、無冗餘、語義化的 css。

變量是 scss 提供的最基本的工具。經過變量可讓獨立的 css 值變得可重用，不管是在一條單獨的規則範圍內仍是在整個樣式表中。css3

變量、混合器的命名甚至 scss 的文件名，能夠互換通用_和-。sass

一樣基礎的是 scss 的嵌套機制。嵌套容許css規則內嵌套css規則，減小重複編寫經常使用的選擇器，同時讓樣式表的結構一眼望去更加清晰。scss同時提供了特殊的父選擇器標識符 & ，經過它能夠構造出更高效的嵌套。ide

混合器容許用戶編寫語義化樣式的同時避免視覺層面上樣式的重複。使用混合器減小重複，使用混合器讓你的css變得更加可維護和語義化。函數

與混合器相輔相成的選擇器繼承。繼承容許你聲明類之間語義化的關係，經過這些關係能夠保持你的css的整潔和可維護性。工具

樣式導入，scss 的另外一個重要特性。經過樣式導入能夠把分散在多個sass文件中的內容合併生成到一個css文件，避免了項目中有大量的css文件經過原生的css @import帶來的性能問題。經過嵌套導入和默認變量值，導入能夠構建更強有力的、可定製的樣式。佈局

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程