5分鐘SASS快速入門

時間 2019-12-06

標籤 5分 sass 快速入門简体版

原文原文鏈接

css預編譯語言Sass幾個特性和快速入手

變量

屢次被使用 ,$開頭, - 相連
添加!default【默認值】如：$color-border : #dce3f3!default;
改一處，全局改，如：Element的換膚 $--color-primary: #409EFF !default;

嵌套

藉助css選擇器的後代選擇器，父子選擇器空格拼接一塊兒
使用場景：修改一個元素及其子元素的樣式多個子元素樣式修改，減小父選擇器的指定
【父選擇器標識符】僞類、僞樣式要用【直接替換，避免了父子選擇器空格拼接】父選擇器前添加選擇器

article a {
  color: blue;
  &:hover { color: red }
}
article a { color: blue }
article a:hover { color: red }

//當用戶在使用IE瀏覽器時，你會經過JavaScript在<body>標籤上添加一個ie的類名
#content aside {
  color: red;
  body.ie & { color: green }
}

羣組選擇器：大量減小css代碼量

.container {
  h1, h2, h3 {margin-bottom: .8em}
}
.container h1, .container h2, .container h3 { margin-bottom: .8em }

nav, aside {
  a {color: blue}
}
nav a, aside a {color: blue}

嵌套屬性

///把屬性名從中劃線-的地方斷開，在根屬性後邊添加一個冒號:，緊跟一個{ }塊，把子屬性
//部分寫在這個{ }塊中
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

===================
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

//優
nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

@import

局部文件【_var.scss】使用場景

一、【變量文件或公共文件】當一些樣式須要在多個頁面甚至多個項目中使用時,不須要在編譯時生成.css文件，只是作被導入用藉助_下劃線如： _var.scss 其文件中變量使用默認變量如： $success-color: #fff00e !default;
二、【一個模塊下多個.scss】當經過@import把sass樣式分散到多個文件時，你一般只想生成少數一個css文件css

media
  _leftSource.scss
  _main.scss
  _rightAttr.scss
  media.scss

sass語法徹底兼容css語法，能夠對於不是很熟悉scss語法的同窗能夠經過，修改原始的.css文件爲.scss文件進行直接導入
對外經過index.scss提供統一出口，內容外其他.scss文件有順序的引入

靜默註釋

body {
  color: #333; // 這種註釋內容不會出如今生成的css文件中
  padding: 0; /* 這種註釋內容會出如今生成的css文件中 */
}

混合器

使用場景：一大段樣式文件能夠被屢次使用時
@mixin 定義 @include 使用 sass嵌套語法在mixin塊{}中所有支持默認參數值

2.1 無參
@mixin 名稱 {
  
}

@include 名稱；

2.2 帶參數
@mixin 名稱($color, $hover){
  
}

@include 名稱(blue, red);

//參數默認值使用$name: default-value的聲明形式，默認值能夠是任何有效的css屬性值，甚至是其餘參數的引用
@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

//$hover和$visited也會被自動賦值爲red
@include link-colors(red)

繼承(@extend)

//經過選擇器繼承繼承樣式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

//注意：選擇器繼承是說一個選擇器能夠繼承爲另外一個選擇器定義的全部樣式，.seriousError不只會繼承.error自身的全部樣式，任何跟.error有關的組合選擇器樣式也會被.seriousError以組合選擇器的形式繼承

更多資料請參考瀏覽器

若是你以爲此文對你有必定的幫助，能夠點擊下方的【贊】收藏備用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。