分类导航

程序笔记发布时间：2019-11-07 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Sass学习笔记，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

source-line="1">

source-line="1">Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

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

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

安装ruby @H_674_10@

安装 sass

更新 update sass

卸载

编译source.scss:target.css

实时编译source.scss:target.css

多文件编译 sourceDir/:targetDir/

输出风格：

嵌套输出方式 nested nested

@H_674_10@展开输出方式 expanded

紧凑输出方式 compact

压缩输出方式 compressed

语法

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

1. 注释

/多行注释在css中可用/

2. 变量

ename: 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;

@H_674_10@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语言的宏基本类似。可以带参数。

mixin border-radius{:;:; } mixin center($width,$height){:;:; } mixin box-shadow($shadow...) {= 1 { @include prefixer(box-shadow,$shadow); }{:;); }{}.box-center {X); }

5. 继承 @include & 占位符 %

继承一个类的所有属性

.btn {:; }.btn-priMary {BACkground-color:;:;.btn; .btn 选择器那里添加当前选择器 .btn,.btn-priMary } {:; }{:; }.btn {5; @extend %pt5; }

6. 数学运算

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

.button {:;:; }

7. 引入文件 @import

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

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

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

实例

项目目录(https://github.com/G-lory/front-end-practice/tree/master/sass-toolbar" target="_blank">https://github.com/G-lory/front-end-practice/tree/master/sass-toolbar)

title="Sass学习笔记" alt="Sass学习笔记" src="https://cn.js-code.com/res/2019/02-05/22/9c24f46243cfb831370c96df2924238e.png" width="163" height="242">

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

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

_mixin.scss

mixin transition($transition) {:;:;:;:;:; }mixin transform-origin($origin) {:;:;:;:;:; }mixin scale($origin) {:;:;:;:;:; }mixin opacity($opcity) {:;:; }

index.scss

mixin"; @import "style";

$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;

@H_674_10@&amp;</span>:<span style="color: #0000ff;"&gt;after {
    content: ''</span>;<span style="color: #ff0000;"&gt;
    position</span>:<span style="color: #0000ff;"&gt; absolute</span>;<span style="color: #ff0000;"&gt;
    right</span>:<span style="color: #0000ff;"&gt; $toolbar-size</span>;<span style="color: #ff0000;"&gt;
    bottom</span>:<span style="color: #0000ff;"&gt; 0</span>;<span style="color: #ff0000;"&gt;
    width</span>:<span style="color: #0000ff;"&gt; 300px</span>;<span style="color: #ff0000;"&gt;
    height</span>:<span style="color: #0000ff;"&gt; 300px</span>;<span style="color: #ff0000;"&gt;
    BACkground-repeat</span>:<span style="color: #0000ff;"&gt; no-repeat</span>;<span style="color: #ff0000;"&gt;
    white-space</span>:<span style="color: #0000ff;"&gt; pre</span>;<span style="color: #ff0000;"&gt;
    @include opacity(0);
    @include scale(0.01);
    @include transition(all 1s);
    @include transform-origin(95% 95%);
</span>}<span style="color: #800000;"&gt;

&amp;:hover </span>{<span style="color: #ff0000;"&gt;    // 当鼠标经过的时候 要向上移动显示文字说明
    .toolbar-btn {
        &amp;</span>:<span style="color: #0000ff;"&gt;before {
            top: -$toolbar-size</span>;
        }<span style="color: #800000;"&gt;
        &amp;:after </span>{<span style="color: #ff0000;"&gt;
            top</span>:<span style="color: #0000ff;"&gt; 0</span>;
        }<span style="color: #800000;"&gt;
    }
    &amp;:after </span>{<span style="color: #ff0000;"&gt;
        @include opacity(1);    // 设置透明度变为完全不透明
        @include scale(1);      // 设置大小变为100%
    </span>}<span style="color: #800000;"&gt;
}

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

@H_674_10@.toolbar-btn </span>{<span style="color: #ff0000;"&gt;
    @extend .icon-qq;    // 继承字体样式 将 before 元素变为字体图标
    &amp;</span>:<span style="color: #0000ff;"&gt;before {
        color: #26b8f2</span>;
    }<span style="color: #800000;"&gt;

    &amp;:after </span>{<span style="color: #ff0000;"&gt;
        content</span>:<span style="color: #0000ff;"&gt; '加我\AQQ'</span>;<span style="color: #ff0000;"&gt; // \A 表示换行
    </span>}<span style="color: #800000;"&gt;
}

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

@H_674_10@.toolbar-btn </span>{<span style="color: #ff0000;"&gt;
    @extend .icon-paypal;    // 继承字体样式 将 before 元素变为字体图标
    &amp;</span>:<span style="color: #0000ff;"&gt;before {
        color: #f3281b</span>;
    }<span style="color: #800000;"&gt;

    &amp;:after </span>{<span style="color: #ff0000;"&gt;
        content</span>:<span style="color: #0000ff;"&gt; '为我\A捐款'</span>;<span style="color: #ff0000;"&gt; // \A 表示换行
    </span>}<span style="color: #800000;"&gt;
}

}
.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;
}

@H_674_10@.toolbar-btn </span>{<span style="color: #ff0000;"&gt;
    @extend .icon-wechat;    // 继承字体样式 将 before 元素变为字体图标
    &amp;</span>:<span style="color: #0000ff;"&gt;before {
        color: #46b942</span>;
    }<span style="color: #800000;"&gt;

    &amp;:after </span>{<span style="color: #ff0000;"&gt;
        content</span>:<span style="color: #0000ff;"&gt; '加我\A微信'</span>;<span style="color: #ff0000;"&gt; // \A 表示换行
    </span>}<span style="color: #800000;"&gt;
}

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

@H_674_10@    &amp;:after </span>{<span style="color: #ff0000;"&gt;
        content</span>:<span style="color: #0000ff;"&gt; '我最\A可爱'</span>;<span style="color: #ff0000;"&gt; // \A 表示换行
    </span>}<span style="color: #800000;"&gt;
}

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

@H_674_10@top: 0;
overflow: hidden;            // 让文字默认位于溢出位置 然后将溢出部分隐藏
@extend [class^="icon-"];    // 继承字体的样式

&amp;:before,&amp;:after </span>{<span style="color: #ff0000;"&gt;
    content</span>:<span style="color: #0000ff;"&gt; ''</span>;<span style="color: #ff0000;"&gt;
    color</span>:<span style="color: #0000ff;"&gt; #fff</span>;<span style="color: #ff0000;"&gt;
    text-align</span>:<span style="color: #0000ff;"&gt; center</span>;<span style="color: #ff0000;"&gt;
    @include transition(top 1s);
</span>}<span style="color: #800000;"&gt;

&amp;:before </span>{<span style="color: #ff0000;"&gt;                   // 默认的图标显示
    top</span>:<span style="color: #0000ff;"&gt; 0</span>;<span style="color: #ff0000;"&gt;
    BACkground-color</span>:<span style="color: #0000ff;"&gt; #d0d6d9</span>;<span style="color: #ff0000;"&gt;
    font-size</span>:<span style="color: #0000ff;"&gt; 30px</span>;<span style="color: #ff0000;"&gt;
    line-height</span>:<span style="color: #0000ff;"&gt; $toolbar-size</span>;
}<span style="color: #800000;"&gt;

&amp;:after </span>{<span style="color: #ff0000;"&gt;                    // 鼠标悬浮时的文字显示
    top</span>:<span style="color: #0000ff;"&gt; $toolbar-size</span>;<span style="color: #ff0000;"&gt;
    BACkground-color</span>:<span style="color: #0000ff;"&gt; #98a1a6</span>;<span style="color: #ff0000;"&gt;
    font-size</span>:<span style="color: #0000ff;"&gt; 12px</span>;<span style="color: #ff0000;"&gt;
    padding-top</span>:<span style="color: #0000ff;"&gt; 12px</span>;<span style="color: #ff0000;"&gt;
    line-height</span>:<span style="color: #0000ff;"&gt; 1.2</span>;<span style="color: #ff0000;"&gt;
    white-space</span>:<span style="color: #0000ff;"&gt; pre</span>;<span style="color: #ff0000;"&gt;        // 为了实现文字换行
</span>}<span style="color: #800000;"&gt;

}

index.html

titletitle

显示效果：

Sass学习笔记

title="Sass学习笔记" alt="Sass学习笔记" src="https://cn.js-code.com/res/2019/02-05/22/b1f8d8dfd42586fb6f305f3627a4b349.png" width="172" height="247">

大佬总结

以上是大佬教程为你收集整理的Sass学习笔记全部内容，希望文章能够帮你解决Sass学习笔记所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：

上一篇: 《你不知道的JavaScript（上卷）... 下一篇:《JavaScript高级教程》学习笔记...

猜你在找的程序笔记相关文章

You can't specify target table 'xxx' for update in FROM clause的解决 2022-07-21
【UNIAPP】上传视频，进度条的前台与后端 2022-07-21
十款代码表白特效，一个比一个浪漫！ 2022-07-04
作业3 2022-07-06
linux系统下部署项目访问报404错误的解决方法 2022-05-30
C++带有指针成员的类处理方式详解 2022-06-07
Linux——（1）基本命令 2022-07-21
JavaScript之正则表达式学习笔记 2019-11-07
Redux源码学习笔记 2019-11-07
Webpack学习笔记 2019-11-07