sass fragment

Original link: http://www.cnblogs.com/thing/p/10844930.html

 

 

variable:

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

 

Nesting:

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

父级选择器：

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

　　

Introduction:

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

// base.scss
@import 'reset';

　　

Mixed (Mixin): reusable css declarations

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

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

　

Inheritance: reusable code snippets

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

　　

Operator:

    +、-、*、/、%

width: 600px / 960px * 100%;

　　

Space Command:

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

　　

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

Reference article: SCSS Tutorial

Reproduced in: https: //www.cnblogs.com/thing/p/10844930.html