标签：字符串拼接 box xtend extend otto scss 个人 lis item
我们平时都称之为 Sass，其实可分成sass和scss， 其中Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，以“.sass”后缀为扩展名；而 SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的语法书写和我们的 CSS 语法书写方式非常类似，较为宽松，以“.scss”后缀为扩展名；二者可以说是一个东西
选择器嵌套
<header>
<nav> <a href="#">home</a> <a href="#">page</a> </nav> </header> nav a { color:red; } header nav a { color:green; } nav { a { color: red; header & { color:green; } } }
属性嵌套(有相同的属性前缀
如 font, background等，也有可能是 -webkit-
.box { font-size: 12px; font-weight: bold; } .box { font: { size: 12px; weight: bold; } }
伪类嵌套
同上选择器嵌套一样 使用 & 关键字
.clearfix{ &:before, &:after { content:""; display: table; } &:after { clear:both; overflow: hidden; } } clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; overflow: hidden; }
占位符：
%bg { background-color: #FF0; } %w { width: 100px; } .box { @extend %w; height: 100px; @extend %bg; }
允许使用变量 以 $ 开头
$test: #ff9500 div{ color: $test; } 也可以字符串拼接 $side : left; .rounded { border-#{$side}-radius: 5px; }
内容：全局、默认、局部变量
使用：默认变量 在局部中无效，覆盖 默认变量 不分上下顺序
<div class="box1"> <div class="box2">box2</div> </div> $backgroundColor: #FF0; // 全局变量 $backgroundColor: #000 !default; // 默认变量 $color: #F0F; .box1 { $color: #CCC; // 局部变量 width: 100px; height: 100px; background-color: $backgroundColor; // #FF0 .box2 { color: $color; // #CCC } }
单独使用@if：
当@if 的表达式不是false或者null时， 条件成立， 输出{} 内的代码
.demo{ $fx: bottom; @if ($fx == top) { border-color: transparent transparent pink transparent; border-style: dashed dashed solid dashed; } @else if($fx == right){ border-color: transparent transparent transparent pink; border-style: dashed dashed dashed solid; } @else if($fx == bottom){ border-color: pink transparent transparent transparent; border-style: solid dashed dashed dashed; } @else if($fx == left){ border-color: transparent pink transparent transparent; border-style: dashed solid dashed dashed; } width: 0px; height: 0px; overflow: hidden; border-width: 60px; }
混合指令 + @if 指令
// 画三角形@mixin声明 @mixin sj($fx:top,$size:100px,$color:red){ @if ($fx == top) { border-color: transparent transparent $color transparent; border-style: dashed dashed solid dashed; } @else if($fx == right){ border-color: transparent transparent transparent $color; border-style: dashed dashed dashed solid; } @else if($fx == bottom){ border-color: $color transparent transparent transparent; border-style: solid dashed dashed dashed; } @else if($fx == left){ border-color: transparent $color transparent transparent; border-style: dashed solid dashed dashed; } width: 0px; height: 0px; overflow: hidden; border-width: $size; } //mixin的调用 .demo{ @include sj(left, 66px, pink); }
less 与sass有个很明显的区别
变量
咱们sass 变量用 $ 开头
less 是以 @ 开头的
@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动；
这个指令包含两种格式：
@for $var from through ，
或者
@for $var from to
<ul> <li class="item-1">至尊魔法师</li> <li class="item-2">王</li> <li class="item-3">奇异博士</li> <li class="item-4">莫度男爵</li> <li class="item-5">哈姆雷特</li> <li class="item-6">蜘蛛侠</li> <li class="item-7">非人哉</li> </ul>
rom ... through
// 当使用 through 时，条件范围包含 与 的值
// 个人分析： 可以将一个页面，不同div中嵌套的元素设置样式，只要命名符合一定的规律
@for $i from 1 through 7 { .item-#{$i} { width: 6em * $i; background: pink; margin: 6px 0; } }
标签：字符串拼接 box xtend extend otto scss 个人 lis item
原文地址：https://www.cnblogs.com/wuliujun521/p/11359126.html
