首页 > 开发 > CSS > 正文

CSS框架sass的简单一览

2024-07-11 08:29:58
字体:
来源:转载
供稿:网友

sass结尾的文件有着更严格的格式要求,scss文件更贴近原生css

比如sass文件

CSS Code复制内容到剪贴板
  1. #main       color: #fff  
  2.   &-sidebar        border: 1px solid  

等同于scss的

CSS Code复制内容到剪贴板
  1. #main {      color: black;   
  2.   &-sidebar { border: 1px solid; }    }  

编译后为

其中代表父级元素的& 只可出现在头部,否则解析不出来。
嵌套属性

CSS Code复制内容到剪贴板
  1. .funky {      font: {   
  2.     family: fantasy;        size: 30em;   
  3.     weight: bold;      }   
  4. }  

编译为

CSS Code复制内容到剪贴板
  1. .funky {      font-family: fantasy;   
  2.   font-size: 30em;      font-weight: bold; }  

这个在一些复杂的css3属性上用处比较大,比如animate
字符串内插

使用#{}作为选择器变量

CSS Code复制内容到剪贴板
  1. $name: foo;    $attr: border;   
  2. p.#{$name} {      #{$attr}-color: blue;   
  3. }      
  4. p {      $font-size: 12px;   
  5.   $line-height: 30px;      font: #{$font-size}/#{$line-height};   
  6. }  

第二个例子如果不用字面量则12除30
运算符

CSS Code复制内容到剪贴板
  1. p {      width: 1in + 8pt;   
  2. }  

单位如果可以转换,会被自动转换
编译为:

CSS Code复制内容到剪贴板
  1. p {      width: 1.111in; }   
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表