sass基础
Posted 沿着路走到底
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了sass基础相关的知识，希望对你有一定的参考价值。
官方网址
项目应用
node-sass
注释
- 常规
a {
color: $color-normal; // 常规颜色
}
// 编译
a {
color: #00bebe; // 常规颜色
}
- 静默
a {
color: $color-normal; /* 常规颜色 */
}
// 编译
a {
color: #00bebe;
}
常用语法
-
变量声明
$color-nio: #00bebe;
.color {
color: $color-nio;
}
-
css嵌套
-
常规写法
$color-normal: #00bebe;
$color-active: #f00;
$color-hover: #fcc;
// 1、常规
.aside-body {
.aside-title {
color: $color-normal;
}
}
// 编译后
.aside-body .aside-title {
color: $color-normal;
}
-
简写
.aside-body {
&-title {
color: $color-normal;
&-color: {
color: $color-normal;
}
}
}
// 编译后
.aside-body .aside-body-title {
color: $color-normal;
}
.aside-body .aside-body-title .aside-body-title-color {
color: $color-normal;
}
-
群组嵌套
.aside-body, .content-body {
.aside-title {
color: $color-normal;
}
}
// 编译后
.aside-body .aside-title,
.content-body .aside-title {
color: $color-normal;
}
-
父选择器的标识符&
a {
color: $color-normal;
&:active {
color: $color-active;
}
&:hover {
color: $color-hover;
}
}
// 编译后
a {
color: $color-normal;
}
a:active {
color: $color-active;
}
a:hover {
color: $color-hover;
}
-
特殊>、+和~
$border-color: #ccc;
$border-width: 1px;
$border-type: dashed;
$bg-color: #eee;
$dt-color: #333;
$dl-color: #666;
$margin-top-normal: 10px;
article {
~ article {
border-top: $border-width $border-type $border-color;
}
> section {
background: $bg-color；
}
dl > {
dt { color: $dt-color }
dd { color: $dl-color }
}
nav + & { margin-top: $margin-top-normal }
}
// 编译
article ~ article { border-top: 1px dashed #ccc }
article > section { border: 1px solid #eee }
article dl > dt { color: #333 }
article dl > dd { color: #666 }
nav + article { margin-top: 10px }
-
混合器
@mixin
// 常规
@mixin text-overflow {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.aside-text {
font-size: $font-size-normal;
@include text-overflow;
}
// 编译结果
.aside-text {
font-size: 12px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
// 参数
@mixin border($border-width: 1px, $border-type: dashed, $border-color: #ccc) {
border: $border-width $border-type $border-color;
}
// 使用默认值
.aside-body {
font-size: $font-size-normal;
@include border;
}
// 编译
.aside-body {
font-size: 12px;
border: 1px dashed #ccc;
}
// 传值
.aside-body {
font-size: $font-size-normal;
@include border(10px, solid, grey);
}
// 编译
.aside-body {
font-size: 12px;
border: 10px solid grey;
}
-
继承
@extend
.error {
border: 1px solid red;
background-color: grey;
}
.seriousError {
@extend .error;
color: white;
}
// 编译结果
.seriousError {
border: 1px solid red;
background-color: grey;
color: white;
}
-
循环
@each
// 1、
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
#{$header} {
font-size: $size;
}
}
// 编译
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
// 2、
@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');
}
-
重复
@while
$i: 24;
@while $i > 12 {
.font-size-#{$i} {
font-size: $i + 'px';
}
$i: $i - 2;
}
// 编译
.font-size-24 { font-size: 24px }
.font-size-22 { font-size: 22px }
...
.font-size-12 { font-size: 12px }
-
方法
@function
$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;
}
-
运算
// + - * / 支持加减乘除
$font-size-normal: 12px;
p {
font-size: $font-size-normal * 2;
}
// 编译
p {
font-size: 24px;
}
// 2、括号
p {
width: 1em + (2em * 3);
}
// 编译
p {
width: 7em;
}
// 字符串运算
$cursor-resize: -resize;
p {
cursor: e + $cursor-resize;
}
p {
cursor: e-resize;
}
-
插值语句(不建议这样写)
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
// 编译
p.foo {
border-color: blue;
}
以上是关于sass基础的主要内容，如果未能解决你的问题，请参考以下文章