SCSS--SCSS 常用属性合集
Posted Z && Y
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了SCSS--SCSS 常用属性合集相关的知识,希望对你有一定的参考价值。
1. 常用属性合集
1.1 规则嵌套
- Scss 允许将一套 css 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器,例如:
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
编译为:
#main p {
color: #00ff00;
width: 97%;
}
#main p .redbox {
background-color: #ff0000;
color: #000000;
}
1.2 父选择器
- 嵌套 CSS 规则时,有时也需要直接使用嵌套外层的父选择器,例如,当给某个元素设定 hover 样式时,或者当 body 元素有某个 classname 时,可以用 & 代表嵌套规则外层的父选择器。
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}
编译为:
a {
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
body.firefox a {
font-weight: normal;
}
1.3 嵌套属性
- 有些 CSS 属性遵循相同的命名空间 (namespace),比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性,同时也为了避免了重复输入,Scss 允许将属性嵌套在命名空间中,例如:
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
编译为:
.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}
1.4 变量 $ (variables: $)
- Scss 最普遍的用法就是变量,变量以美元符号开头,赋值方法与 CSS 属性的写法一样:
$width: 5em;
// 使用
#main {
width: $width;
}
编译为:
#main {
width: 5em
}
1.5 运算
- Scss支持数字的加减乘除、取整等运算 (+, -, *, /, %),如果必要会在不同单位间转换值。
p {
width: 10px + 20px;
}
编译为:
p {
width: 30px;
}
1.6 变量定义 !default (variable Defaults: !default)
- 可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值,此时,如果变量已经被赋值,不会再被重新赋值,但是如果变量还没有被赋值,则会被赋予新的值。
$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;
#main {
content: $content;
new-content: $new_content;
}
编译为:
#main {
content: "First content";
new-content: "First time reference";
}
1.7 @import
- Scss 拓展了 @import 的功能,允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中,另外,被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
@import "foo.scss";
// 或
@import "foo";
- Scss 允许同时导入多个文件,例如同时导入 rounded-corners 与 text-shadow 两个文件:
@import "rounded-corners", "text-shadow";
1.8 @media
- Scss 中 @media 指令与 CSS 中用法一样,只是增加了一点额外的功能:允许其在 CSS 规则中嵌套。如果 @media 嵌套在 CSS 规则内,编译时,@media 将被编译到文件的最外层,包含嵌套的父选择器。这个功能让 @media 用起来更方便,不需要重复使用选择器,也不会打乱
@media screen {
.sidebar {
@media (orientation: landscape) {
width: 500px;
}
}
}
编译为:
@media screen and (orientation: landscape) {
.sidebar {
width: 500px; }
}
1.9 @extend
- 在设计网页的时候常常遇到这种情况:一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式。通常会在 html 中给元素定义两个 class,一个通用样式,一个特殊样式。假设现在要设计一个普通错误样式与一个严重错误样式,一般会这样写:
.father{
color: yellow;
font-size: 18px;
}
.son{
@extend .father;
font-weight: bold;
}
编译为:
.father{
color: yellow;
font-size: 18px;
}
.son{
color: yellow;
font-size: 18px;
font-weight: bold;
}
2.0 控制指令 @if、@else if、@else
- 当 @if 的表达式返回值不是 false 或者 null 时,条件成立,输出 {} 内的代码:
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
编译为:
p {
border: 1px solid;
}
- @if 声明后面可以跟多个 @else if 声明,或者一个 @else 声明。如果 @if 声明失败,Sass 将逐条执行 @else if 声明,如果全部失败,最后执行 @else 声明,例如:
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
编译为:
p {
color: green;
}
2.1 @for
@for 指令可以在限制的范围内重复输出格式,每次按要求(变量的值)对输出结果做
出变动。这个指令包含两种格式:@for $var from <start> through <end>,或者
@for $var from <start> to <end>,区别在于 through 与 to 的含义:当使用 through 时,条
件范围包含 <start> 与 <end> 的值,而使用 to 时条件范围只包含 <start> 的值不包含
<end> 的值。另外,$var 可以是任何变量,比如 $i;<start> 和 <end> 必须是整数
值。即through前闭后闭 to是前闭后开
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
编译为:
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
2.2 @each
@each 指令的格式是 $var in <list>, $var 可以是任何变量名,比如 $length 或者
$name,而 <list> 是一连串的值,也就是值列表。
@each 将变量 $var 作用于值列表 中的每一个项目,然后输出结果,例如:
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
编译为:
.puma-icon {
background-image: url('/images/puma.png');
}
.sea-slug-icon {
background-image: url('/images/sea-slug.png');
}
.egret-icon {
background-image: url('/images/egret.png');
}
.salamander-icon {
background-image: url('/images/salamander.png');
}
2.3 @while
- @while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环,只是很少会用到。例如:
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
编译为:
.item-6 {
width: 12em;
}
.item-4 {
width: 8em;
}
.item-2 {
width: 4em;
}
2.4 定义混合样式指令 @mixin & 引入混合样式@include
- 混合指令的用法是在 @mixin 后添加名称与样式,比如名为 large-text 的混合通过下面的代码定义:
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
- 混合也需要包含选择器和属性,甚至可以用 & 引用父选择器:
@mixin clearfix {
display: inline-block;
&:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html & { height: 1px }
}
- 引用混合样式 @include
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
编译为:
.page-title {
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
padding: 4px;
margin-top: 10px;
}
2.5 混合样式指令的参数
- 参数用于给混合指令中的样式设定变量,并且赋值使用。在定义混合指令的时候,按照变量的格式,通过逗号分隔,将参数写进圆括号里。引用指令时,按照参数的顺序,再将所赋的值对应写进括号:
@mixin sexy-border($color, $width) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue, 1rem); }
编译为:
p {
border-color: blue;
border-width: 1rem;
border-style: dashed;
}
2.6 函数指令 (Function Directives)
- Scss 支持自定义函数,并能在任何属性值或 Sass script 中使用:
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
编译为:
#sidebar {
width: 240px;
}
以上是关于SCSS--SCSS 常用属性合集的主要内容,如果未能解决你的问题,请参考以下文章