搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > Css3 > 正文

CSS框架sass的简单一览

发布时间：2023-01-17 08:26:56 来源：网络
.
中岁颇好道，晚家南山陲。兴来美独往，胜事空自知。一些风景再好，终不属于自己;有些情感，路过交错，已然是最好的结局。

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

比如sass文件

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

等同于scss的

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

编译后为

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

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

编译为

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

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

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

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

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

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

单位如果可以转换，会被自动转换
编译为：

CSS Code复制内容到剪贴板
  1. p{
  2. width:1.111in;}
  4. p{
  5. font:10px/8px;//PlainCSS,nodivision
  6. $width:1000px;
  7. width:$width/2;//Usesavariable,doesdivision
  8. width:round(1.5)/2;//Usesafunction,doesdivision
  9. height:(500px/2);//Usesparentheses,doesdivision
  10. margin-left:5px+8px/2px;//Uses+,doesdivision
  11. }

直接字面量，变量使用，函数，括号，优先级
以上编译为

CSS Code复制内容到剪贴板
  1. p{
  2. font:10px/8px;
  3. width:500px;
  4. height:250px;
  5. margin-left:9px;
  6. }

颜色：

CSS Code复制内容到剪贴板
  1. p{
  2. color:#010203+#040506;//相加rbg三位分别相加
  3. color:#010203*2;//相乘
  4. color:rgba(255,0,0,0.75)+rgba(0,255,0,0.75);//带alpha通道的叠加
  6. color:opacify($translucent-red,0.3);//控制透明的函数，加强非透明
  7. background-color:transparentize($translucent-red,0.25);//控制透明的函数，加强透明
  8. }

默认变量：

CSS Code复制内容到剪贴板
  1. $content:"Firstcontent";
  2. $content:"Secondcontent?"!default;
  3. $new_content:"Firsttimereference"!default;
  5. #main{
  6. content:$content;
  7. new-content:$new_content;
  8. }

!default 如变量被赋值使用之前的赋值，没被赋值，赋值

到此这篇关于CSS框架sass的简单一览就介绍到这了。幽默就是一个人想哭的时候还有笑的兴致。更多相关CSS框架sass的简单一览内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章:
标签： CSS sass
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图