sass片段

 

 

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

变量：

$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';

　　

混合（Mixin）：可复用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教程

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄