文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

<h1 id="安装" data-source-line="6">安装

安装ruby

安装 sass

更新

卸载

编译

实时编译

多文件编译

输出风格：

嵌套输出方式 nested nested

展开输出方式 expanded

紧凑输出方式 compact

压缩输出方式 compressed

语法

语法比较多只写几条看起来常用的吧。

1. 注释

显示这些注释

/多行注释在css中可用/

2. 变量

全局变量 $variableName: variableValue;

selector {
// 局部变量会覆盖全局变量
$variableName: variableValue;
// 使用变量
label: $variableName;
}
// !default 如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。
$variableName: variableValue !default;
// 全局变量
$variableName: variableValue !global;

// 一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以 #{$variables}形式使用。
//应用于class和属性
.border-#{$borderDirection}{
border-#{$borderDirection}:1px solid #ccc;
}

3. 嵌套

{:; }header nav a {
color:green;
}
/ 用scss表示 */
nav {
a {
color: red;

header &amp; { // &amp; 表示当前选择器
  color</span>:<span style="color: #0000ff;"&gt;green</span>;
}<span style="color: #800000;"&gt;

}
}

/ 属性嵌套 /
.Box {
border-top: 1px solid red;
border-bottom: 1px solid green;
}
/ 在 Sass 中我们可以这样写：*/
.Box {
border: {
top: 1px solid red;
bottom: 1px solid green;
}
}

/ 伪类/伪元素嵌套 /
.clearfix{
&:before,&:after {
content:"";
display: table;
}
&:after {
clear:both;
overflow: hidden;
}
&:hover {
...
}
}

4. 混合宏 @mixin @include

用法和C语言的宏基本类似。可以带参数。

{:;:; } {:;:; } 数量值大于或等于“ 1 ”时，表示有多个阴影值，反之调用默认的参数值“ 0 0 4px rgba(0,.3) ”。Box-shadow($shadow...) {= 1 { @include prefixer(Box-shadow,$shadow); }{:;Box-shadow,$shadow); }调用宏 {}Box-center {}

5. 继承 @include & 占位符 %

继承一个类的所有属性

{:; }{:;:; 添加当前选择器 .btn,.btn-primary } 调用时才生效 {:; }{:; }{}

6. 数学运算

可以直接在属性值的地方使用数学运算符

{:;:; }

7. 引入文件 @import

文件

可以在文件名前加下划线如防止生成.css文件，引入时通过就可以引入，所以在同一个目录不能同时存在带下划线和不带下划线的同名文件。

如果文件的扩展名是 .css。如果文件名以开头。如果文件名是 url()。如果 @import 包含了任何媒体查询（media queries）。它会被编译成 CSS 的 @import 规则。

也可以通过一个 @import 引入多个文件。

实例

项目目录()

_style.scss，fonts是下载的字体文件（https://icomoon.io/app/#/select）

没想过写个CSS也要写这么多注释。。。

_mixin.scss

属性时间 @mixin transition($transition) {:;:;:;:;:; }{:;:;:;:;:; }{:;:;:;:;:; }{:;:; }

index.scss

$toolbar-size: 50px;
.toolbar {
position: fixed; // 固定定位
right: 10px;
bottom: 10px;
}
.toolbar-item {
position: relative; // 子代使用absulote定位所以这里要设置relative定位
display: block; // 因为a标签是内联元素默认不能设置宽高
margin-top: 1px; // 几个小方块的间距为1px
width: $toolbar-size;
height: $toolbar-size;

&:after { content: ''; position: absolute; right: $toolbar-size; b<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>om: 0; width: 300px; height: 300px; background-repeat: no-repeat; white-space: pre; @include opacity(0); @include scale(0.01); @include transition(all 1s); @include transform-origin(95% 95%); } &:hover { // 当鼠标经过的时候要向上移动<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a><a href="https://www.jb51.cc/tag/wenzi/" target="_blank" class="keywords">文字</a>说明 .toolbar-btn { &:before { top: -$toolbar-size; } &:after { top: 0; } } &:after { @include opacity(1); // 设置透明度变为完全不透明 @include scale(1); // 设置大小变为100% } }

}
.toolbar-item-qq {
&:after {
background-image: url(../img/qq.png);
width: 180px;
height: 180px;
}

.toolbar-btn { @extend .icon-qq; // 继承字体样式将 before 元素变为字体图标 &:before { color: #26b8f2; } &:after { content: '加我\AQQ'; // \A 表示换行 } }

}
.toolbar-item-pay {
&:after {
background-image: url(../img/pay.png);
}

.toolbar-btn { @extend .icon-paypal; // 继承字体样式将 before 元素变为字体图标 &:before { color: #f3281b; } &:after { content: '为我\A捐款'; // \A 表示换行 } }

}
.toolbar-item-wechat {
&:after {
content: "\A不告\A诉你";
color: #fff;
font-size: 20px;
line-height: 1.2;
text-align: center;
background-color: #000;
width: 100px;
height: 100px;
}

.toolbar-btn { @extend .icon-wechat; // 继承字体样式将 before 元素变为字体图标 &:before { color: #46b942; } &:after { content: '加我\A微信'; // \A 表示换行 } }

}
.toolbar-item-cool {
.toolbar-btn {
@extend .icon-cool; // 继承字体样式将 before 元素变为字体图标
&:before {
color: #000;
}

&:after { content: '我最\A可爱'; // \A 表示换行 } }

}
.toolbar-btn {
&,&:before,&:after {
width: $toolbar-size;
height: $toolbar-size;
position: absolute;
left: 0;
}

top: 0; overflow: hidden; // 让<a href="https://www.jb51.cc/tag/wenzi/" target="_blank" class="keywords">文字</a><a href="https://www.jb51.cc/tag/mo/" target="_blank" class="keywords">默</a>认位于溢出位置然后将溢出部分隐藏 @extend [class^="icon-"]; // 继承字体的样式 &:before,&:after { content: ''; color: #fff; text-align: center; @include transition(top 1s); } &:before { // <a href="https://www.jb51.cc/tag/mo/" target="_blank" class="keywords">默</a>认的图标<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a> top: 0; background-color: #d0d6d9; font-size: 30px; line-height: $toolbar-size; } &:after { // 鼠标悬浮时的<a href="https://www.jb51.cc/tag/wenzi/" target="_blank" class="keywords">文字</a><a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a> top: $toolbar-size; background-color: #98a1a6; font-size: 12px; padding-top: 12px; line-height: 1.2; white-space: pre; // 为了实现<a href="https://www.jb51.cc/tag/wenzi/" target="_blank" class="keywords">文字</a>换行 }

}

index.html

Meta 默认显示显示

显示效果：

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

Sass学习笔记

语法

实例

相关推荐