分类导航

Sass学习笔记

发布时间:2019-11-07 发布网站:大佬教程
大佬教程收集整理的这篇文章主要介绍了Sass学习笔记大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

安装ruby   

安装 sass 

更新   

卸载   

编译 

实时编译 

多文件编译   

输出风格:

嵌套输出方式 nested   

展开输出方式 expanded

紧凑输出方式 compact

压缩输出方式 compressed

语法

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

1. 注释

<span style="color: #008000;">/<span style="color: #008000;">多行注释 在css中可用<span style="color: #008000;">/

2. 变量 

selector {<span style="color: #ff0000;">
// 局部变量 会覆盖全局变量
$variableName:<span style="color: #0000ff;"> variableValue;<span style="color: #ff0000;">
// 使用变量
label:<span style="color: #0000ff;"> $variableName;
}<span style="color: #800000;">
// !default 如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值。
$variableName: variableValue !default;
// 全局变量
$variableName: variableValue !global;

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

3. 嵌套

{:; }header nav a {<span style="color: #ff0000;">
color
:<span style="color: #0000ff;">green
;
}
<span style="color: #008000;">/
<span style="color: #008000;"> 用scss表示
<span style="color: #008000;">*/
<span style="color: #800000;">
nav
{<span style="color: #ff0000;">
a {
color:<span style="color: #0000ff;"> red;<span style="color: #ff0000;">

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

}
}

<span style="color: #008000;">/<span style="color: #008000;"> 属性嵌套 <span style="color: #008000;">/<span style="color: #800000;">
.box {<span style="color: #ff0000;">
border-top:<span style="color: #0000ff;"> 1px solid red;<span style="color: #ff0000;">
border-bottom:<span style="color: #0000ff;"> 1px solid green;
}
<span style="color: #008000;">/<span style="color: #008000;"> 在 Sass 中我们可以这样写:<span style="color: #008000;">*/<span style="color: #800000;">
.box {<span style="color: #ff0000;">
border:<span style="color: #0000ff;"> {
top: 1px solid red;<span style="color: #ff0000;">
bottom:<span style="color: #0000ff;"> 1px solid green;
}<span style="color: #800000;">
}

<span style="color: #008000;">/<span style="color: #008000;"> 伪类/伪元素 嵌套 <span style="color: #008000;">/<span style="color: #800000;">
.clearfix{<span style="color: #ff0000;">
&:<span style="color: #0000ff;">before,&:after {
content:"";<span style="color: #ff0000;">
display:<span style="color: #0000ff;"> table;
}<span style="color: #800000;">
&:after {<span style="color: #ff0000;">
clear:<span style="color: #0000ff;">both;<span style="color: #ff0000;">
overflow:<span style="color: #0000ff;"> hidden;
}<span style="color: #800000;">
&:hover {<span style="color: #ff0000;">
...
}<span style="color: #800000;">
}

4. 混合宏 @mixin @include

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

{:;:; } {:;:; } {= 1 { @include prefixer(box-shadow,$shadow); }{:;}{}{}

5. 继承 @include & 占位符 %

继承一个类的所有属性

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

6. 数学运算

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

{:;:; }

7. 引入文件 @import

  

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

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

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

实例

项目目录()

Sass学习笔记

_style.scss,fonts是下载的字体文件(https://icomoon.io/app/#/select)

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

_mixin.scss

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

index.scss

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

&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 {<span style="color: #ff0000;">
&:<span style="color: #0000ff;">after {
background-image: url(../img/qq.png);<span style="color: #ff0000;">
width:<span style="color: #0000ff;"> 180px;<span style="color: #ff0000;">
height:<span style="color: #0000ff;"> 180px;
}<span style="color: #800000;">

.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 {<span style="color: #ff0000;">
&:<span style="color: #0000ff;">after {
background-image: url(../img/pay.png);
}<span style="color: #800000;">

.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 {<span style="color: #ff0000;">
&:<span style="color: #0000ff;">after {
content: "\A不告\A诉你";<span style="color: #ff0000;">
color:<span style="color: #0000ff;"> #fff;<span style="color: #ff0000;">
font-size:<span style="color: #0000ff;"> 20px;<span style="color: #ff0000;">
line-height:<span style="color: #0000ff;"> 1.2;<span style="color: #ff0000;">
text-align:<span style="color: #0000ff;"> center;<span style="color: #ff0000;">
background-color:<span style="color: #0000ff;"> #000;<span style="color: #ff0000;">
width:<span style="color: #0000ff;"> 100px;<span style="color: #ff0000;">
height:<span style="color: #0000ff;"> 100px;
}<span style="color: #800000;">

.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 {<span style="color: #ff0000;">
.toolbar-btn {
@extend .icon-cool; // 继承字体样式 将 before 元素变为字体图标
&:<span style="color: #0000ff;">before {
color: #000;
}<span style="color: #800000;">

    &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 {<span style="color: #ff0000;">
&,&:<span style="color: #0000ff;">before,&:after {
width: $toolbar-size;<span style="color: #ff0000;">
height:<span style="color: #0000ff;"> $toolbar-size;<span style="color: #ff0000;">
position:<span style="color: #0000ff;"> absolute;<span style="color: #ff0000;">
left:<span style="color: #0000ff;"> 0;
}<span style="color: #800000;">

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

显示效果:

Sass学习笔记

Sass学习笔记

大佬总结

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

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

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