sass 用法:
1 $highlight-color: #F90; 空格或者逗号 分割多个属性值,用$作为声明的变量
可在块内和外存在
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
变量中可以再次嵌套变量
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
border: $highlight-border;
}
中划线和下划线 表示意思相同
$link-color: blue;
a {
color: $link_color;
}
<style rel="stylesheet/scss" lang="scss" scoped>
2 可以嵌套,完全可以理解
有不可理解&忽略
:hover { color: red } 鼠标悬浮则文字变红
3 导入外部 css方法,
css : 也有但是会慢,因为用到了才下载,
scss则直接下载
themes/_night-sky.scss
@import "themes/night-sky";
会取消扩展名
4 静默注释方法:
// 这种注释内容不会出现在生成的css文件中
5 有点鸡肋的混合器 mixin,适合于代码重用功能
//在style文件夹下定义一个mixin.scss文件
//定义宽高
@mixin wh($width, $height) {
width: $width;
height: $height;
}
//定义margin的值
@mixin mg($top, $right, $bottom, $left) {
margin-top: $top!important;
margin-left: $left;
margin-bottom: $bottom;
margin-right: $right;
使用方法:
<style lang='scss'>
@import '../../style/mixin.scss';
#work{
.head-index {
@include wh(100%, 100px);
background-color: #fff;
box-shadow: 0 1px 0 0 #ddd;
.head-index-logo span{
text-align: left;
font-size: 40px;
}
}
.work-nav {
@include wh(100%, 300px);
background-color: #ddd;
margin-top: 0!important;
.nav-left {
@include mg(0, 0, 0, 20px);
}
}
}
</style>
使用@include 导入方法,用来传值
SASS 坑点: 安装是 sass,扩展名却必须是 scss,否则格式无法识别 使用的变量必须带$,支持了 自动监视 预处理器,变量,嵌套,组合,继承 问题:CSS 难以维护, 重复代码 使用power shell可以打开像 linux一样的终端 安装: 1 github下载 2 npm 安装 3 brew 使用macos 安装 使用npm 安装 cnpm install -g sass sass 出现帮助表示安装成功 2 新建html 用vscode 新建input.scss $main-color:red; body{ margin:0; padding:0; h1{ font-size:4rem; } } 3 手动的 sass input.scss output.css 4 监视变化 ,自动的 sass --watch input.scss:output.css text-decoration:underline,自动变化 5 实时预览插件 live-server 6 实现登录功能 title 登录 link xxx。css div.card. 登录之后更加精彩 form input type =email id =email name=email, placeholder 邮箱 复制 选中三个 密码 复制 submit value 登录 注册和扽牢固 ul li a href 注册,忘记密码 css $main-color:#2cc71 #second-color:#27a160 *{ margin:0; padding:0; box-sizing:border-box; } body{ background: url(../img/bg.jpg) noxxxxx; }