当前位置:首页>开发>正文

sass系统产品介绍

2024-07-03 13:31:02 互联网 未知 开发

sass系统产品介绍?

sass系统产品介绍

sass是css的预处理器,它提供了许多便利的写法方法


可以使用变量,常量,嵌套,函数,混合,继承等功能,让css的开发变得更加简单可维护。


直接写出来的sass文件其实就是普通的文本文件,以.sass或.scss作为文件后缀名。


里面可以直接使用css语法以及sass特有的语法特性,完成后通常需要经过编译成合法的css文件以供浏览器使用。


sass的安装


sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby。

安装完成后需测试安装有没有成功,运行CMD输入以下命令:

ruby -v

如安装成功会打印

ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]

Ruby自带一个叫做RubyGems的系统,用来安装基于Ruby的软件。我们可以使用这个系统来 轻松地安装Sass和Compass。要安装最新版本的Sass和Compass,你需要输入下面的命令:

安装如下(如mac安装遇到权限问题需加 sudo gem install sass)

gem install sass

gem install compass

在每一个安装过程中,你都会看到如下输出:

Fetching: sass-3.x.x.gem (100%)

Successfully installed sass-3.x.x

Parsing documentation for sass-3.x.x

Installing ri documentation for sass-3.x.x

Done installing documentation for sass after 6 secon

1 gem installed

安装完成之后,你应该通过运行下面的命令来确认应用已经正确地安装到了电脑中:

sass -v

Sass 3.x.x (Selective Steve)

compass -v

Compass 1.x.x (Polaris)

Copyright (c) 2008-2015 Chris Eppstein

Released under the MIT License.

Compass is charityware.

Please make a tax deductable donation for a worthy cause: http://umdf.org/compass


sass的编译

1.命令行编译

//单文件转换命令

sass input.scss output.css

//单文件监听命令

sass --watch input.scss:output.css

//如果你有很多的sass文件的目录,你也可以告诉sass监听整个目录:

sass --watch app/sass:public/stylesheets

2.编译工具Koala

3.使用vscode中的Live Sass Compiler插件来实现scss文件的实时编译


变量

Sass 让人们受益的一个重要特性就是它为 CSS 引入了变量。你可以把反复使用的 CSS 属性值 定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值。

变量的定义是以$符号开头,加上变量名,比如:

$text-warning: red

$border-radius: 5px

.tip {

color: $text-warning

border: 1px solid $border-radius

}

变量也可以通过加减乘除等运算符号进行计算,比如:

$font-base: 10px

.article {

font-size: $font-base * 2 - 4px

border-width: $font-base / 10

}

变量的注意事项

变量需要提前声明才能使用,因为编译是从上往下进行的,如果在还未声明变量的地方使用,会找不到这个变量。

变量都是全局变量,如果在大括号内部定义的变量则属于局部变量。


嵌套

通常所用到的选择器嵌套是这样的,将新的选择器放到父级选择器当中,并且可以无限多级嵌套。


继承

如果存在两个class,他们有一些不同但又有许多相似之处,以前的做法可能是把所有样式重复声明两次。但是有sass之后更好的做法是创建一个基础的class,然后在第二个class中用@extend继承它,同时还可以添加一些额外的样式,或者对某些样式进行重写。比如我们之前学过bootstrap的按钮的构建思想,是对基础样式进行附加和重写,而现在想要定义自己的样式时就可以很方便地进行这一操作了。首先声明一个标准样式的class,然后继承这个样式,然后设置不同的主题色:


混合

当出现大段大段重用样式代码时,独立的变量就难以应付,这个时候可以通过sass的混合器@mixin 和 @include 实现大段样式的重用。在定义mixin时,需要在前面添加@符号,使用时需要用@include来引用该@mixin:


导入

导入规则可以从外部文件导入mixin混合器等等。在sass中有一个命名惯例,被导入的样式文件名用下划线做前缀。导入的语法是@import “xxx”,这里的xxx不需要带文件后缀和下划线前缀。也就是说导入“_style.sass”或者“_style.scss”的时候,只需要写@import “style”就可以了:


1.为什么要使用SASS?


它是预处理语言,它为CSS提供缩进语法(它自己的语法)。


它允许更有效地编写代码和易于维护。


它是包含CSS的所有功能的CSS的超集,是一个开源的预处理器,以 Ruby 编码。


它提供了比平面CSS好的结构格式的文档样式。


它使用可重复使用的方法,逻辑语句和一些内置函数,如颜色操作,数学和参数列表。


2.列出SASS的一些功能?


它是更稳定,强大,与CSS的版本兼容。


它是超集的CSS和基于JavaScript。


它被称为CSS的语法糖,这意味着它使用户更容易阅读或表达的东西更清楚。


它使用自己的语法并编译为可读的CSS。


你可以在更少的时间内轻松地编写CSS代码。


它是一个开源的预处理器,被解释为CSS。


3.SASS的优点是什么?


它允许在编程结构中编写干净的CSS。


它有助于编写CSS更快。


它是CSS的超集,帮助设计师和开发人员更有效率和快速地工作。


由于Sass兼容所有版本的CSS,我们可以使用任何可用的CSS库。


可以使用嵌套语法和有用的函数,如颜色操作,数学和其他值。

Saas(软件服务化Software as a Service)

Saas平台是运营saas软件的平台。SaaS提供商为企业搭建信息化所需要的所有网络基础设施及软件、硬件运作平台,并负责所有前期的实施、后期的维护等一系列服务,企业无需购买软硬件、建设机房、招聘IT人员,即可通过互联网使用信息系统。SaaS 是一种软件布局模型,其应用专为网络交付而设计,便于用户通过互联网托管、部署及接入。

最新文章