scss基础语法与在datatable项目中的运用

[ahua52]

什么是sass

SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护

安装

SASS是Ruby语言写的，必须先安装Ruby，然后再安装SASS。安装完Ruby后,执行

gem install sass

使用

SASS文件就是普通的文本文件，里面可以直接使用CSS语法。下面写法，显示.scss文件转化的css代码

sass test.scss

果要将显示结果保存成文件，后面再跟一个.css文件名。

sass test.scss test.css

基础语法

文件后缀名

sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件,我们项目中采用scss后缀

//文件后缀名为sass的语法
body
  background: #eee
  font-size:12px
p
  background: #0982c1

//文件后缀名为scss的语法  
body {
  background: #eee;
  font-size:12px;
}
p{
  background: #0982c1;
} 

导入important

编译时会将@import的scss文件合并进来只生成一个CSS文件

@import "reset.css";
@import "a";

p{
  background: #0982c1;
} 

变量

必须是$开头

普通变量

定义之后可以在全局范围内使用

//sass style
//-------------------------------
$fontSize: 12px;
body{
    font-size:$fontSize;
}

//css style
//-------------------------------
body{
    font-size:12px;
}

默认变量

仅需要在值后面加上!default即可。
默认变量的价值在进行组件化开发的时候会非常有用

//sass style
//-------------------------------
$baseLineHeight:        1.5 !default;
body{
    line-height: $baseLineHeight; 
}

//css style
//-------------------------------
body{
    line-height:1.5;
}

特殊变量

变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用

//sass style
//-------------------------------
$borderDirection:       top !default;

//应用于class和属性

.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}

//css style
//-------------------------------
.border-top{
  border-top:1px solid #ccc;
}

map

map数据以key和value成对出现，其中value又可以是list。格式为：$map: (key1: value1, key2: value2, key3: value3);。可通过map-get($map,$key)取值。

//sass style
//-------------------------------

$headings:（h1:2em,h2:1.5em,h3:1.2em;

@each $header,$size in $headings{
  #{$header} {
    font-size: $size;
  }
}

//css style
//-------------------------------

h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}

嵌套Nesting

选择器嵌套

使用&表示父元素选择器

//sass style
//-------------------------------
#top_nav{
  line-height: 40px;
  a{
    display: block;
    padding: 0 10px;
    color: #fff;

    &:hover{
      color:#ddd;
    }
  }
}

//css style
//-------------------------------
#top_nav{
  line-height: 40px;
}  
#top_nav a{
  display: block;
  padding: 0 10px;
  color: #fff;
}
#top_nav a:hover{
  color:#ddd;
}

属性嵌套(不常用)

指有些属性拥有同一个开始单词
如border-width,border-color

//sass style
//-------------------------------
.fakeshadow {
  border:{
    style:solid;
    left:{
      width:4px;
      color:#888;   
    }
    right:{
      width:2px;
      color:#ccc;
    }
  }


}
//css style
//-------------------------------
.fakeshadow{
  border-style:solid;
  border-left-width:4px;
  border-left-color:#888;
  border-right-width:2px;
  border-right-color:#ccc;
}

@at-root

普通跳出嵌套

//sass style
//-------------------------------
//没有跳出
.parent-1 {
  color:#f00;
  .child {
    width:100px;
  }
}

//单个选择器跳出
.parent-2 {
  color:#f00;
  @at-root .child {
    width:200px;
  }
}

//多个选择器跳出
.parent-3 {
  background:#f00;
  @at-root {
    .child1 {
      width:300px;
    }
    .child2 {
      width:400px;
    }
  }
}

//css style
//-------------------------------
.parent-1 {
  color: #f00;
}
.parent-1 .child {
  width: 100px;
}
.parent-2 {
  color: #f00;
}
.child {
  width: 200px;
}
.parent-3 {
  background: #f00;
}
.child1 {
  width: 300px;
}
.child2 {
  width: 400px;
}

@at-root与&配合使用

//sass style
//-------------------------------
.child{
    @at-root .parent &{
        color:#f00;
    }
}

//css style
//-------------------------------
.parent .child {
  color: #f00;
}

混合mixin

@mixin声明混合

无参数mixin

//sass style
//-------------------------------
@mixin center-block{
  margin-left:auto;   
}
.demo{
  @include center-block;
}
//css style
//-------------------------------
.demo{
  margin-left:auto;
}

有参数mixin

参数名以$符号开始，`也可设置默认参数

//sass style
//-------------------------------
@mixin opacity($opacity:50){
  opacity:$opacity / 100;
  filter: alpha(opacity=$opacity);  
}
//css style
//-------------------------------
.opacity{
  @include opacity; //参数使用默认值
}
.opacity-80{
  @include opacity(80); //传递参数
}

继承extend

//sass style
//-------------------------------
h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}
//css style
//-------------------------------
h1,.speaker{
  border: 4px solid #ff9aa9;
}
.speaker{
  border-width: 2px;
}

占位选择器%

这种选择器的优势：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式。
占位选择器以%标识定义，通过@extend调用

//sass style
//-------------------------------
%ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
#header{
  h1{
    @extend %ir;
    width:300px;
  }
}
//css style
//-------------------------------
#header h1{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
  width:300px;
}

函数

常用的为颜色函数，lighten和darken为最。lighten($color,$amount)和darken($color,$amount)

//sass style
//-------------------------------
$baseFontSize:      10px !default;
$gray:              #ccc !defualt; 
// pixels to rems 
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}

body{
  font-size:$baseFontSize;
  color:lighten($gray,10%);
}
.test{
  font-size:pxToRem(16px);
  color:darken($gray,10%);
}

//css style
//-------------------------------
body{
  font-size:10px;
  color:#E6E6E6;
}
.test{
  font-size:1.6rem;
  color:#B3B3B3;
}

条件判断及循环

@if判断

//sass style
//-------------------------------
$lte7: true;
$type: monster;
.ib{
    display:inline-block;
    @if $lte7 {
        *display:inline;
        *zoom:1;
    }
}

//css style
//-------------------------------
.ib{
    display:inline-block;
    *display:inline;
    *zoom:1;
}

三目判断

/if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

for循环

//sass style
//-------------------------------
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

//css style
//-------------------------------
.item-1 {
  width: 2em; 
}
.item-2 {
  width: 4em; 
}
.item-3 {
  width: 6em; 
}

datatable项目sass应用

sass源文件目录datatable\src\ui,项目中scss模块化管理，根据scss功能进行文件化管理

• utility.scss 初始样式
• global.scss 通用全局样式
• minxins.scss 所有的混合放在这里
• variables.scss 变量定义集合
• color.scss 关于色值得变量定义(需配合palette.scss)
• themeColor.scss 定义默认主题色
• u.scss import所有scss
• 功能页面scss 比如tooltip.scss

[GuoYongfeng]

@ahua52 好文

建议

• 整体内容需要再梳理一下
  • sass介绍（能力特性，和less对比，生态）
  • 快速上手
  • 基本语法
  • 和其他工具结合（gulp、webpack、npm script等）
  • sass在iuap-design框架（不是datatable）中的应用实践
• 给各条目加上序号，增加条理性