SASSの断片

オリジナルリンク： http://www.cnblogs.com/thing/p/10844930.html

 

 

変数：

$color: #333;
body { color: $color;}  ----->  body { color: #333; }

 

ネスト：

nav {
  ul { margin: 0; }
｝
------------------------------
nav ul { margin: 0;｝

父级选择器：

   a {
       &:hover { text-decoration: underline; }
   ｝

　　

はじめに：

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

// base.scss
@import 'reset';

　　

ミックス（ミックスイン）：再利用可能なCSS宣言

@mixin border-radius($radius) {
          border-radius: $radius;
      -ms-border-radius: $radius;
}
.box {
  @include border-radius(10px);
}
----------------------------------------

.box {
  border-radius: 10px;
  -ms-border-radius: 10px；
｝

　

継承：再利用可能なコードスニペット

%common {
  border: 1px solid #ccc;
  padding: 10px;
}
.message {
  @extend %common;
}

　　

演算子：

    +、 - 、*、/、％

width: 600px / 960px * 100%;

　　

宇宙司令：

.demo {
  font: {  
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

　　

 -------------------------------------------------- -----------

参考記事：SCSSチュートリアル

ます。https：//www.cnblogs.com/thing/p/10844930.htmlで再現