Sass-1【Sass初识、编译、输出方式】

最新推荐文章于 2026-03-08 05:17:37 发布

原创最新推荐文章于 2026-03-08 05:17:37 发布 · 311 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Sass

本文介绍了Sass的安装过程，通过RubyInstaller下载并使用StartCommandPropoptWithRuby客户端。讲解了Sass的基础知识，包括复用区块、值引用以及功能特性。此外，还详细阐述了Sass的编译命令、作用域问题和不同输出方式。最后，提到了Sass与scss的区别，并提供了实时编译和文件编译的命令示例。

下载安装

https://rubyinstaller.org/downloads/选择Ruby2.4.4-2下载

启动 StartCommand Propopt With Ruby客户端

输入命令: gen install sass

切换源: gen sources -add https://gens.ruby-china.con/ --remove https://rubygens.org/

查看版本: sass -v

更新及卸载: gen uninstall sass gen update sass

一.sass初识

(1).复用区块

@mixin ellipsis{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
p{
    @include ellipsis;
}
span{
    @include ellipsis;
}

(2).值引用

$bg-color:red;
div{
    background-color:$bg-color;
}
a{
    background-color:$bg-color;
}

(3).认识

能实现的功能: 编译纯css没有的变量简单的逻辑程序

sass是基于ruby语言开发完成的

20世纪90年代日本人松本行弘开发

RubyGems是ruby的包管理工具就和npm是node是node.js的包管理工具

(4).sass与scss的区别

sass诞生于2007年，有两种语法，一种是sass语法一种是scss语法

sass语法后缀名.sass

scss语法后缀名 .scss

sass是用缩进代替括号和分号

空格代替{}

换行代替;

$color:#fff
$font-size:10px
.box
    color:$color
    fontsize:$fontsize

3.0版本时引入了scss

sassy css 它就是在css写法的扩展

二.编译

(1).编译命令

sass sass/index.scss:css/index.css --style expanded

(2).作用域问题

$font-size:32px;
p{
    font-size:$font-size;
}
span{
    $font-size:16px;
    font-size: $font-size;
      $font-size:16px !global;   //!global可以在局部声明全局
}

三.输出方式

(1).watch监听变化、同步更新

sass --watch sass/index.scss:css/index.css --style expanded

(2).编译命令格式

单文件编译

sass <要编译的Sass文件路径>:<要输出的CSS文件路径>

多文件编译

sass <要编译的Sass文件夹路径>:<要输出的CSS文件夹路径>

(3).输出风格

ul{
    width:100px;
    li{
        width:100%
    }
}

1.nested 嵌套输出方式

ul{
    width:100px;}
    ul li {
        width:100%;}

2.expanded 展开输出方式

ul{
    width:100px;
}
ul li{
        width:100%
    }

3.compact 紧凑输出方式

ul{width:100px;}
ul li{width:100%}

4.compressed 压缩输出方式

ul{width:100px;}ul li{width:100%}

标签

#sass