sass中有意思的实用属性

sass中几个实用属性

工作中sass有时候，直接开封即用sass，有时候就会用几个基本的嵌套、父选择器等。还有一些别的使用小技巧，特地推出来分享一下

属性嵌套

 .ljl {
  font: {
    family: fantasy;
    size: 20px;
    weight: bold;
  }
}

编译为

.ljl {
  font-family: fantasy;
  font-size: 20px;
  font-weight: bold; 
}

可以把相同的属性作为命名空间，便于管理。

运算

sass使用计算这个公能是我比较喜欢的

.roles-managment{
  width: (300px * 2);
  height: (400px / 2);
  font-size: (4px + 12px);
  border: (5px - 2px) solid #ccc;
}

编译为

.roles-managment{
  width: 600px;
  height: 200px;
  font-size: 16px;
  border: 3px solid #ccc;
}

要想使用calc可以直接使用百分比计算，我感觉也挺好的，这个计算你可以搭配一个命名的常量进行使用。

@import "rounded-corners", "text-shadow"

可以导入多个文件的，是不是有的时候习惯性一次一次导入

继承

.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}

可以吧公共样式提取出来，然后使用继承，就可以。
如果元素还有下一级就像这样

 .main{
   color: red;
   .son{
     height: 200px;
   }
 }
 .other{
   @extend .main;
   background-color: black;
 }

那最后的编译为

 .main{
   color: red;
   .son{
     height: 200px;
   }
 }
 .other{
   color: red;
   background-color: black;
   .son{
     height: 200px;
   }
 }

还有很多有意思的sass预编译等着你去发现，sass官网生活就是多积累，多发现有意思的东西。