专业网站建设顾问,网站流量怎么提升,网站发布内容是否过滤,设计师必备的6个网站Sass基础
简介
Sass是一种stylesheet语言#xff0c;可以被编译成CSS。Sass允许你使用诸如variabels#xff0c;nested rules#xff0c;mixins#xff0c;functions等等语法#xff0c;这些都将在本篇的接下来进行讲解。
因为之前一直学的后端#xff0c;前端只是因为…Sass基础
简介
Sass是一种stylesheet语言可以被编译成CSS。Sass允许你使用诸如variabelsnested rulesmixinsfunctions等等语法这些都将在本篇的接下来进行讲解。
因为之前一直学的后端前端只是因为项目需要简单的写过一些前端样式和界面 (javaScript,html,css) 。通过对Sass基础的了解后感觉前端借助Sass具备了一点面向过程的感觉。
Variables
在原生的css中是没有变量这种说法的当我们想要写一个样式时只能像这样
body {font: 100% Helvetica, sans-serif;color: #333;
}但是当我们在.scss中却可以借助变量来实现。
$font-stack: Helvetica, sans-serif;
$primary-color: #333;body {font: 100% $font-stack;color: $primary-color;
}如果后端熟悉的你是不是有点感觉了呢
当Sass被处理时将$font-stack和$primary-color放置到css中。
Nesting
当我们在写HTML时可能会注意到我们会写一些基于视觉层次结构 (visual hierarchy) 的代码。你或许注意到这是一个嵌套 (nest) 的结构但是在css中却不提供嵌套的写法。就变成下面这样显而易见相当的麻烦。
navul/ulli/li
/navnav ul {margin: 0;padding: 0;list-style: none;
}
nav li {display: inline-block;
}基于这个原因 ➡️ Sass提供了解决方法你可以在写css的时候使用Sass语法来完成嵌套。可以看到ulli被嵌套写入了nav中。
nav {ul { margin: 0; }li { display: inline-block; }
}Modules
Sass提供了模块化支持我们并不需要把所有的Sass写在单个文件里。听上去似乎很像C语言里的.h文件是吧
下面给出一个例子
body {font: 100% Helvetica, sans-serif;color: #333;
}.inverse {background-color: #333;color: white;
}我们可以通过在styles.scss中使用 use关键字来引入_example.scss来达到复用的效果。
注意❗当一个.scss要被 use到主样式表styles.scss时那么给他取名的时候应该在最前面****一个_下划线。
当一个_aaa.scss文件没有被 use到另一个不完整的scss文件中那么在执行sass --watch scss:css命令构建项目时就不会生成该文件为aaa.css。
// _example.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;body {font: 100% $font-stack;color: $primary-color;
}// styles.scss
use example;.inverse {background-color: base.$primary-color;color: white;
}Mixins
在css中写一些prefixes时总是会有点无聊这就是我大一时发誓“再也不碰前端”的原因繁琐的prefixes写起来真的有够让人难受的。
但是Sass提供了Mixins功能这个功能就很像函数了。
mixin指令允许我们定义一个可以在整个样式表中重复使用的样式。比如当我们遇到下面这种令人无聊的情况时
.info {background: DarkGray;box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);color: #fff;
}.alert {background: DarkRed;box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);color: #fff;
}通过 mixin来写Mixins然后再用 include引入样式。
mixin theme($theme: DarkGray) {background: $theme;box-shadow: 0 0 1px rgba($theme, .25);color: #fff;
}.info {include theme;
}
.alert {include theme($theme: DarkRed);
}Extend/Inheritance
使用 extend让你的样式分享到1个或者多个选择器上。我们来看一个简单Demo。
.error, .success, .message {border: 1px solid #ccc;padding: 10px;color: #333;
}.success {border-color: green;
}.error {border-color: red;
}可以看到.success和.error的样式和.warning几乎相同这种情况下使用 extend就非常好了。
相同的样式通过%stylesheet的格式命名然后让选择器 extend这些样式就了。
/* This CSS will print because %message-shared is extended. */
%message-shared {border: 1px solid #ccc;padding: 10px;color: #333;
}// This CSS wont print because %equal-heights is never extended.
%equal-heights {display: flex;flex-wrap: wrap;
}.message {extend %message-shared;
}.success {extend %message-shared;border-color: green;
}.error {extend %message-shared;border-color: red;
}注意如果一个%stylesheet没有被extend的话就不会被编译生成。
Operators
Sass让数学运算在css中成为可能。Sass提供了诸如-*math.div()%的运算符号至于代表什么运算我觉得没必要再说了。
.container {display: flex;
}article[rolemain] {width: 62.5%;
}aside[rolecomplementary] {width: 31.25%;margin-left: auto;
}需要 use sass:math。
use sass:math;.container {display: flex;
}article[rolemain] {width: math.div(600px, 960px) * 100%;
}aside[rolecomplementary] {width: math.div(300px, 960px) * 100%;margin-left: auto;
}本篇参考Sass官方文档Sass: Sass Basics (sass-lang.com)
更多内容可移步Sass: Documentation (sass-lang.com)
