Sass使用小技巧
2024-09-12 16:01:05
1、任何可以用作css属性值的赋值都可以用作sass变量值。如果变量值与属性不匹配，sass会当作普通字符串来处理。
$family: "microsoft yahei", Arial, sans-serif;
div {
font-family: $family;
color: 7em;
}
编译为：
div {
font-family: "microsoft yahei", Ubuntu, Arial, sans-serif;
color: 7em;
}
2、添加!global标识的变量将作用在全局
.inner {
$some-color: #ccc !global;
}
div {
color: $some-color;
}
编译为：
div {
color: #ccc;
}
3、颜色也是可运算的
div {
color: #010203 + #030201;
background: #010203 * 2;
}
编译为：
div {
color: #040404;
background: #020406;
}
4、在类名、属性名、字符串变量值中使用变量时，需要用#{}包裹
$name: foo;
$prop: width;
div.#{$name} {
$font-size: 14px;
$font-weight: bold;
font: #{$font-size} * #{$font-weight};
border-#{$prop}: 1px;
}
编译为：
div.foo {
font: 14px * bold;
border-width: 1px;
}
5、中划线和下划线是互相兼容的，用中划线申明的变量可以用下划线引用，反之亦然。
div {
$some-color: #ccc;
color: $some_color;
}
编译为：
div {
color: #ccc;
}
6、带有!default标识的变量，如果该变量在别处声明了，且声明的值不为null，则用声明的值，否则用这个默认值。
$some-color: #ccc;
$some-color: red !default;
$bg: null;
$bg: #fff !default;
div {
color: some-color;
background-color: $bg;
}
编译为：
div {
color: #ccc;
background-color: #fff;
}
7、&指向父选择器。如果没有父选择器，&为null，所以&可以在条件语句中使用。
a {
&:hover {
color: red;
}
.tip & {
font-size: 14px;
}
}
.foo .bar, .baz {
/* 此时&为：((".foo" ".bar"), ".baz") */
@if & {
background: #ccc;
} @else {
a {
color: #ccc;
}
}
}
编译为：
a:hover {
color: red;
}
.tip a {
font-size: 14px;
}
.foo .bar, .baz {
background: #ccc;
}
最新文章
- Objective-C学习笔记之for( int )机制
- smarty汇总
- java map缓存
- 【转】一步步教你读懂NET中IL(图文详解)
- 转：Zend Framework 2.0 分析
- ORA-04092: COMMIT 不能在触发器中
- android 中文 api （71） —— BluetoothServerSocket[蓝牙]
- 去掉matlab图片空白边缘
- java中 i = i++ 的结果
- PHP页面提示与跳转
- CodeM美团点评编程大赛复赛 做题感悟&题解
- spring-boot(二)
- C++基础知识--DAY2
- html 腳本
- A2W，W2A等的使用
- android ------- TCP与UDP
- Spring注解之@Lazy注解
- python 生成器 的send
- React组件继承的由来
- cocoahttpserver使用具体解释（二）