scss 速记
2022/4/22 23:43:47
本文主要是介绍scss 速记,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
CSS 功能拓展
嵌套
#main p { color: #00ff00; .redbox { color: #000000; } }
属性嵌套
个人基本没怎么用过。
.funky { font: { family: fantasy; size: 30em; weight: bold; } }
父选择器 &
a { font-weight: bold; &:hover { text-decoration: underline; } body.firefox & { font-weight: normal; } &-sidebar { border: 1px solid; } }
占位符选择器 %
与常用的 id 与 class 选择器写法相似,只是 # 或 . 替换成了 %。当占位符选择器单独使用时(未通过 @extend 调用),不会编译到 CSS 文件中。
注释
- 多行注释
/* */
,编译后保留; - 单行注释
//
,编译后去除。
变量 $
$width: 5em; // 全局 $width: 6rem !default; // 设置默认值 #main { $width: 5em; // 局部 width: $width; } #main { $width: 5em !global; // 全局 width: $width; }
数据类型
- 数字:
1, 2, 13, 10px
; - 字符串:有引号字符串与无引号字符串,
"foo", 'bar', baz
; - 颜色:
blue, #04a3f9, rgba(255,0,0,0.5)
; - 布尔:
true, false
; - 空值:
null
- 数组:用空格或逗号作分隔符,
1.5em 1em 0 2em, Helvetica, Arial, sans-serif
;- 独立的值也被视为数组 —— 只包含一个值的数组;
- 数组中可以包含子数组,内外层使用不同分隔符或使用括号,
1px 2px, 5px 6px
,(1px 2px) (5px 6px)
- maps:相当于 JavaScript 的 object,
(key1: value1, key2: value2)
运算
数字运算
- 普通运算,
+, -, *, /, %
; - 关系运算,
<, >, <=, >=
; - 相等运算,
==, !=
。
颜色值运算
插值语句 #{}
通过 #{} 插值语句可以在选择器或属性名中使用变量。
$name: foo; $attr: border; p.#{$name} { #{$attr}-color: blue; }
指令 @rule
导入文件 @import
// 多文件导入,默认拓展名.scss .sass @import 'rounded-corners', 'text-shadow'; // 使用插值语法 $family: unquote('Droid+Sans'); @import url('http://fonts.googleapis.com/css?family=\#{$family}');
分音
如果需要导入 SCSS 或者 Sass 文件,但又不希望将其编译为 CSS,只需要在文件名前添加下划线,这样会告诉 Sass 不要编译这些文件,但导入语句中却不需要添加下划线。
例如,将文件命名为 _colors.scss
,便不会编译 _colours.css
文件。
@import 'colors';
嵌套 @import
// example 文件 .example { color: red; } #main { @import 'example'; // 等价下面 .example { color: red; } }
继承 @extend
.error { border: 1px #f00; } a:hover { text-decoration: underline; } .seriousError { @extend .error; @extend a:hover; border-width: 3px; }
控制指令
条件 @if @else if @else
p { @if 1 + 1 == 2 { border: 1px solid; } @else if { border: 2px dotted; } @else { color: black; } }
循环 @for
@while
@for $var from <start> through <end>
,包含<end>
;@for $var from <start> to <end>
,不包含<end>
。
@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } $i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; }
迭代器 @each
$var in <list>
。
@each $animal in puma, sea-slug, egret, salamander { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); } } // 类似 js 解构语法 每一项结构为 $animal, $color, $cursor @each $animal, $color, $cursor in (puma, black, default), (sea-slug, blue, pointer), (egret, white, move) { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); border: 2px solid $color; cursor: $cursor; } }
混入 @mixin
@include
// 定义 @mixin large-text { color: #ff0000; } // 引用 .page-title { @include large-text; padding: 4px; margin-top: 10px; } // 携带参数,并可以设置默认值 @mixin sexy-border($color, $width: 3rem) { border: { color: $color; width: $width; style: dashed; } } p { // 顺序参数 @include sexy-border(blue, 1in); // 指定参数 @include sexy-border($color: blue); } // 解构与打包,类似 js,只不过...后置 @mixin box-shadow($shadows...) { -moz-box-shadow: $shadows; -webkit-box-shadow: $shadows; box-shadow: $shadows; } .shadows { @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999); } @mixin colors($text, $background, $border) { color: $text; background-color: $background; border-color: $border; } $values: #ff0000, #00ff00, #0000ff; .primary { @include colors($values...); }
这篇关于scss 速记的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-14CSS-Module学习:轻松入门指南
- 2024-11-12CSS9资料入门指南
- 2024-11-12CSS浮动资料详解:初学者指南
- 2024-11-12CSS选择器资料详解与实战教程
- 2024-11-12CSS样式资料:初学者必备指南
- 2024-11-11CSS项目实战:从入门到上手
- 2024-11-11CSS定位项目实战:新手指南
- 2024-11-11CSS浮动项目实战:初学者指南
- 2024-11-11CSS选择器项目实战:从入门到上手
- 2024-11-11CSS样式项目实战:新手入门指南