Sass学习笔记

发布时间：2020-12-15 01:24:07 所属栏目：C语言来源：网络整理

导读：参考《》《》强烈推荐后者，良心课程。 h1 id="安装" data-source-line="6"安装安装ruby?? ? 安装 sass ? 更新?? ? 卸载?? ? 编译 ? 实时编译 ? 多文件编译?? ? 输出风格：嵌套输出方式 nested?? ? 展开输出方式 expanded 紧凑输出方式 compact 压缩输出方

参考《》《》强烈推荐后者，良心课程。

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

安装ruby???

安装 sass?

更新???

卸载???

编译?

实时编译?

多文件编译???

输出风格：

嵌套输出方式 nested???

展开输出方式 expanded

紧凑输出方式 compact

压缩输出方式 compressed

语法

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

1. 注释

/多行注释在css中可用/

2. 变量?

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 { @include prefixer(box-shadow,$shadow); }{:;}{}{}

5. 继承 @include & 占位符 %

继承一个类的所有属性

{:; }{:;:; } {:; }{:; }{}

6. 数学运算

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

{:;:; }

7. 引入文件 @import

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

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

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

实例

项目目录()

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

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

_mixin.scss

{:;:;:;:;:; }{:;:;:;:;:; }{:;:;:;:;:; }{:;:; }

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; bottom: 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 { // 当鼠标经过的时候要向上移动显示文字说明 .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; // 让文字默认位于溢出位置然后将溢出部分隐藏 @extend [class^="icon-"]; // 继承字体的样式 &:before,&:after { content: ''; color: #fff; text-align: center; @include transition(top 1s); } &:before { // 默认的图标显示 top: 0; background-color: #d0d6d9; font-size: 30px; line-height: $toolbar-size; } &:after { // 鼠标悬浮时的文字显示 top: $toolbar-size; background-color: #98a1a6; font-size: 12px; padding-top: 12px; line-height: 1.2; white-space: pre; // 为了实现文字换行 }

}

index.html

显示效果：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!