sass常用語法

legendmohe 發布于2019-08-30 13:05 / 1215人閱讀

摘要：常用語法是的預處理器，提供了很多方便的語法，如嵌套可復用代碼塊等，但是我們在做一般程序的時候用不上這么多功能，這里總結了里我用的最多的幾種常用語法定義變量元素包含偽類的嵌套這里的指的是前面的選擇器。

sass常用語法

sass是css的預處理器，提供了很多方便的語法，如嵌套、可復用代碼塊等，但是我們在做一般程序的時候用不上這么多功能，這里總結了sass里我用的最多的幾種常用語法：

定義變量

$ff: Arial;
$font-color: #ccc;
$background-grey: #f5f5f5;

元素（包含偽類）的嵌套

a {
  color: $font-color;
  cursor: pointer;
  &:hover {
    text-decoration: none;
  }
}

這里的&指的是前面的選擇器。

屬性的嵌套

  font: {
    family: $ff;
    size: 26px;
    weight: 900;
  }

類的繼承及不表現樣式

%error {
  color: #f00;
}

%error.instrusion {
  background-image: url(../images/rabbit-big.png);
}

.serious-error {
  @extend %error;
  border: #ff0000 1px solid;
}

這里的%error是不表現樣式，只能用來繼承。

可復用代碼塊@mixin

@mixin col-sm ($width:50%){
  @media (min-width: 768px) {
    width: $width;
    float: left;
  }
}

這里定義了一個名為col-sm的代碼塊通過后面的括號傳參，名為$width的參數默認值為50%，里面的@media是媒體查詢，也可以不傳變量，去掉后面的括號就行。

GPU云服務器云服務器 python常用語法 sass 多云管理 sass sass 混合云部署

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115300.html

sass的基本使用

摘要：本文所有的例子都是在中編譯，而可以自行編譯，具體可以查看該鏈接配置的概念定義是的一種預處理器，文件后綴名為，可以用中的來轉成樣式。最近在項目中利用到了css預處理器（sass），而之前沒接觸過的本博主出于好奇心，就在業余的時間里搜了一些資料來看看，看完后覺得sass挺不錯，就想簡單的介紹一下sass的基本使用方法（ps：本文只介紹sass的一些基本使用，而這些內容都是本博主覺得比較有...

alighters 2019-08-30 15:53 評論0 收藏0
vscode常用插件【全了】

摘要：插件集待補充。。。同時，它還包含了用于轉換為格式和生成數據模式的選項用于壓縮合并和文件的應用程序。它提供了大量自定義的設置，以及自動壓縮保存并導出為文件的選項。修改文本的更多命名格式，包括駝峰命名下劃線分隔命名，命名以及命名等切換漂亮的主題插件集待補充。。。 20180903 文件【Path Intellisense】自動補全路徑瀏覽器【Open-In-Browser】在...

kyanag 2019-08-30 13:57 評論0 收藏0
vscode常用插件【全了】

摘要：插件集待補充。。。同時，它還包含了用于轉換為格式和生成數據模式的選項用于壓縮合并和文件的應用程序。它提供了大量自定義的設置，以及自動壓縮保存并導出為文件的選項。修改文本的更多命名格式，包括駝峰命名下劃線分隔命名，命名以及命名等切換漂亮的主題插件集待補充。。。 20180903 文件【Path Intellisense】自動補全路徑瀏覽器【Open-In-Browser】在...

xcc3641 2019-08-26 11:42 評論0 收藏0
前端開發VScode常用插件

摘要：名稱功能自動閉合標簽自動提示修改標簽時，自動修改匹配的標簽格式化編寫更加人性化的注釋添加行書簽的瀏覽器兼容性檢查運行選中代碼段支持大量語言，包括單詞拼寫檢查在中彈出瀏覽器并搜索，可編輯搜索引擎顏色值在代碼中高亮顯示小窗口顯示顏色值，等等拾色名稱功能 Auto Close Tag 自動閉合HTML標簽 Auto Import...

hellowoody 2019-08-21 18:21 評論0 收藏0