.container { width: 100%; }
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complementary"] {
float: right;
width: 300px / 960px * 100%;
}
.container
width: 100%
article[role="main"]
float: left
width: 600px / 960px * 100%
aside[role="complementary"]
float: right
width: 300px / 960px * 100%
.container {
width: 100%;
}
article[role="main"] {
float: left;
width: 62.5%;
}
aside[role="complementary"] {
float: right;
width: 31.25%;
}
$main-color: lightpink;
operator | 说明 |
+ | 此运算符用于加法。 |
- | 此运算符用于减法。 |
* | 此运算符用于乘法。 |
/ | 此运算符用于除法。 |
% | 该运算符用于余数。 |
加法(+)运算符还可用于连接字符串,但仅适用于具有兼容单位的数字。
h2 {
font-size: 15px + 2em; // Show error due to incompatible units
font-size: 15px + 2; // 17px
}
将两个相同单位的数字相乘是无效的CSS:
h2 {
font-size: 5px * 2px; // invalid CSS
}
除法运算符是CSS速记属性的组成部分。
font: 16px / 24px Arial sans-serif;
background: url("http://example.com") no-repeat fixed center / cover;
h2 {
font-size: 16px / 24px // Outputs as CSS
font-size: (16px / 24px) // Uses parentheses, does division
font-size: #{$base-size} / #{$line-height}; // Uses interpolation, outputs as CSS
font-size: $base-size / $line-height // Uses variables, does division
opacity: random(4) / 5; // Uses a function, does division
padding-right: 2px / 4px + 3px // Uses an arithmetic expression, does division
}
Sass根据BODMAS公式遵循运算符优先级。
首先评估括号内的表达式。
相乘(*)和相除(/)运算符的优先级高于加法(+)和相减运算符(-)。
h2 {
width: 3px * 5 + 5px; // 20px
width: 3 * (5px + 5px); // 30px
width: 3px + (6px / 2) * 3; // 12px
}
操作符 | 说明 |
== | 它等于运算符。 |
!= | 它不等于运算符。 |
@mixin font-fl($font){
&:after {
@if(type-of($font) == string) {
content: 'My font is: #{$font}.';
} @else {
content: 'Sorry, the argument #{$font} is a #{type-of($font)}.';
}
}
}
h2{
@include font-fl(sans-serif);
}
h2:after {
content: 'My font is: sans-serif.';
}
$list: "red", "yellow", "lightblue";
@mixin fg-color($property) {
@each $item in $list {
$color-length: str-length($item);
@if( $color-length % 2 != 0 ) {
#{$property}: unquote($item);
}
}
}
h2 {
@include fg-color(color);
}
h2 {
color: lightblue;
}
操作符 | 说明 |
> | 它指定一个大于比较运算符。 |
>= | 它指定一个大于或等于比较运算符。 |
< | 它指定小于比较运算符。 |
<= | 它指定小于或等于比较运算符。 |
$padding: 50px;
h2 {
@if($padding <= 20px) {
padding: $padding;
} @else {
padding: $padding / 2;
}
}
h2 {
padding: 25px;
}
操作符 | 条件 | 说明 |
and | x和y | 如果x和y均为true,则指定true。 |
or | x或y | 如果x或y为true,则指定true。 |
not | x | 如果x不为真,则为真。 |
$list-map: (success: lightgreen, alert: red, info: lightblue);
@mixin button-state($btn-state) {
@if (length($list-map) > 2 or length($list-map) < 5) {
background-color: map-get($list-map, $btn-state);
}
}
.btn {
@include button-state(success);
}
.btn {
background-color: lightgreen;
}