Sass的安装以及使用

最新推荐文章于 2024-05-10 14:02:56 发布

置顶我不是安徒生

最新推荐文章于 2024-05-10 14:02:56 发布

阅读量896

点赞数 3

分类专栏：前端工具文章标签： sass 安装基本用法 sass的安装与使用 ruby

本文链接：https://blog.csdn.net/yyl927117/article/details/80885834

版权

前端工具专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一，Sass简述

首先什么是Sass？按照官方的说法，Sass是目前世界上最成熟，最稳定，最强大的专业级css扩展语言，注意是css的扩展语言。Sass是对CSS3（层叠样式表）的语法的一种扩充，我们可以认为是一款强化 CSS 的辅助工具（官方也是这样说的）。Sass本身的语法并不太容易让浏览器识别（虽然它和CSS的语法非常的像，几乎一样），因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）我们可以更有效有弹性的写出Stylesheet，有助于更好地组织管理样式文件，以及更高效地开发项目，好了，接下来就让我们一起看一下Sass是如何安装以及使用的吧！

二、Sass的安装

Sass是Ruby语言写的，但是两者的语法没有关系。所以如果你不懂Ruby也没有关系，照样可以正常使用Sass。只是我们必须要先安装Ruby，然后再安装Sass。

如果你使用的是IOS系统，那么你的系统已经安装好了Ruby；如果你使用的是微软的Windows系统，那么安装就有些麻烦。不过也不用担心，我们往下看，按照下面的步骤，就可以帮你迅速安装好。

1.安装Ruby

(1) 到Ruby的官网上根据自己电脑下载相应的版本，例如我的是window 64位的

在这里插入图片描述

(2)打开安装包，出现如下图，点击OK

在这里插入图片描述

(3)选择（I accept the License）点击next

在这里插入图片描述
(4)出现这个图，我们最好选择第二个（会把Ruby放到你的环境变量里面，不然后面配置环境变量会很麻烦），然后点击install

(5)完成后运行cmd进入命令符，输入ruby -v查看版本号。

如果能正确显示版本号，则说明ruby安装成功。但因为国内网络的问题导致gem源间歇性中断因此我们需要更换gem源。
（使用淘宝的gem源https://ruby.taobao.org/）如下：
//1.删除原gem源
gem sources --remove https://rubygems.org/

//2.添加国内淘宝源
gem sources -a https://ruby.taobao.org/

//3.打印是否替换成功
gem sources -l

//4.更换成功后打印如下
*** CURRENT SOURCES ***
https://ruby.taobao.org/

然后输入gem install sass进行安装。
安装成功后出现下面的截图
在这里插入图片描述
至此，Sass安装已经安装完成了！

三，Sass的使用(基本用法快速入门)

1、语法格式

Sass语法格式有两种，这个根据个人的喜好进行选择吧（个人比较倾向于第二种，个人感觉相对于css的书写方式来说，比较好理解）

(1) 通过 tab 键控制缩进的一种语法规则，而且这种缩进要求非常严格

$def-color: #333 
body 
font: 100% 
color: $def-color

(2) 和正常的css差不多，代码都包裹在一对大括号里，并且末尾结束处都有一个分号

$def-color: #333 
body{ 
font: 100%； 
color: $def-color； 
}

2、变量的声明以及引用

(1) SASS允许使用变量，所有变量以$开头来进行标识。

比如：$base-color和$theme-width

注意：当变量定义在css规则块内，那么该变量只能在此规则块内使用。

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//编译后

nav {
  width: 100px;
  color: #F90;
}

在这个例子中，$nav-color这个变量定义在了规则块外边，所以在这个样式表中都可以像 nav规则块那样引用它。$width这个变量定义在了nav的{ }规则块内，所以它只能在nav规则块内使用。这意味着是你可以在样式表的其他地方定义和使用$width变量，不会对这里造成影响。

另外，声明变量用的中划线进行分割（也可以用下划线）,中划线和下划线是互通。例如：编译前

$color-lins:#ccc; body{ color: $color_lins; }

编译后的css

body {
color: #ccc; }

(2) 变量的引用

父选择器的标识符&

#scss
div a{
  color: #333;
  &:hover{
    color: red;
  }
  //如果body的class .ies
  body.ies & {
    color:#888;
  }
}
#编译后的css
div a {
  color: #333; 
}
div a:hover {
  color: red; 
}
body.ies div a {
  color: #888; 
}

普通变量和默认变量

普通变量可以全局使用，默认变量则需要加上!default
sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。
#scss  
$font-color:#f7f7f7;//普通变量
$font-size:16px;//重新声明变量
$font-size:14px !default;//默认变量

.main{
  color: $font-color;
  font-size: $font-size;
}
#编译后的css
.main {
  color: #f7f7f7;
  font-size: 16px; }

全局变量和局部变量

#全局变量就是定义在元素外面的变量

#scss
$color:#333 !default;//全局变量
h1{
  color: $color;//引用全局变量
  a{
    $color:red;//重新定义变量，局部变量
    span{
      color: $color;//引用局部变量
    }
  }
  $color:#999;//重新定义变量，局部变量
  span{
    color:$color;//引用局部变量
  }
}
#编译后的css
h1 {
  color: #333; 
}
h1 a span {
    color: red; 
}
h1 span {
    color: #999; 
}

3、计算

Sass允许在代码中使用算式，支持数字的加减乘除运算、取整运算 (+, -, *, /, %)，颜色运算，布尔运算（ and, or, 和 not ）等，例如：

//数字运算
body {
　　　margin: (14px/2);
　　　top: 50px + 100px;
　　　right: $var * 10%;
　}
//颜色运算　
//如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。
html{
  color: #010203 + #040506;
}
计算方式：1+4=5   2+6 = 7   3+6 = 9

#编译后的css
html {
color: #050709; }

html {
color: #010203 * 2;
}

#编译后的css
html {
color: #020406; }

and运算
#scss
$age:10;
html{
  @if ($age > 10 and $age < 25) {
        color: green;
   }@else{
     color:red;
   }
}

#编译后的css
html {
  color: red; }

4、嵌套

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，例如：

div span {
　　　　color : red;
　　}

我们可以写成下面这样的：

div {
　　　　span{
　　　　　　color:red;
　　　　}
　　}

嵌套-属性嵌套
类似于font,border,margin,padding这些属性我们也可以进行嵌套，例如：

#scss
【注意：】属性嵌套的时候属性的后面必须跟冒号，比如：border：{......}
.main{
  border:{
    top:1px solid #444;left:1px solid #000;
  }
  margin: {
    top:25px;left:36px;right: 65px;bottom: 23px;
  }
  padding: {
    top: 2px;left: 26px;right: 12px;bottom: 28px;
  }
}
#编辑后的css
.main {
  border-top: 1px solid #444;
  border-left: 1px solid #000;
  margin-top: 25px;
  margin-left: 36px;
  margin-right: 65px;
  margin-bottom: 23px;
  padding-top: 2px;
  padding-left: 26px;
  padding-right: 12px;
  padding-bottom: 28px; }

在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：

a {
　　　　&:hover { color: #ffb3ff; }
　　}

5、导入Sass文件

如果我们现在有一个color.scss的配置文件，需要引入到style.scss，我们可以用@import命令，来插入外部文件。例如：

@import "path/color.scss";

此时，我们就可以在style里面使用color.scss的变量了，例如：$sys-color是color.scss的变量

header h1{font-size: 14px;color: $sys-color}

6、混合器的使用

通常网站会有很多重复的代码存在，比如圆角，或者按钮的css,为了避免写重复的代码，所以我们可以选择用混合器。这就有点像C语言的宏，是可以重用的代码块

混合器使用@mixin标识符定义

#定义混合器
@mixin borderRadius {
  border-radius: 5px;
  -webkit-border-radius；5px；
  -moz-border-radius:5px;
}

#通过@include来使用这个混合器
h1{
font-size: 28px;color: #333;
@include borderRadius;
}

#编译后的css
h1 {
font-size: 28px;
color: #333;
//混合器里面被编译出来的代码
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

另外，混合器的另一个强大之处是里面还可以传参
混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。类似js的function

//定义可传参数混合器
@mixin border-radius($size){
  border-radius:$size;
  -webkit-border-radius:$size;
  -moz-border-radius:$size;
}
h1{
font-size: 28px;color: #333;
@include border-radius(10px);
}


#编译后的css
h1 {
font-size: 28px;
color: #333;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

7、继承

Sass允许一个选择器，继承另一个选择器使用@extend命令。

比如，现有class1：

.class1 {
　　　　border: 1px solid #ddd;
　　}

class2要继承class1，就要使用@extend命令：

.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}

8、占位符 %placeholder

Sass 额外提供了一种特殊类型的选择器：占位符选择器 (placeholder selector)。与常用的 id与 class 选择器写法相似，只是 #或.替换成了%。必须通过@extend指令调用，当占位符选择器单独使用时（未通过 @extend调用），不会编译到 CSS 文件中。

#scss 声明%变量
%padTop5{
  padding-top: 5px;
}
%padBot5{
  padding-bottom: 5px;
}
.ulo{
  @extend %padTop5;
  @extend %padBot5;
}


#编译后的css
.ulo {
padding-top: 5px; }
.ulo {
padding-bottom: 5px; }

但是占位符有一个缺点，就是生成的css里面无法合并。

9、注释

Sass共有两种注释风格。

(1) 标准的CSS注释 /* comment */ ，会保留到编译后的文件。

(2) 单行注释 // comment，只保留在SASS源文件中，编译后被省略。

在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。例如：

　/*! 
　　　　这个地方是重要注释！
　　*/

这就是Sass中我们经常使用的一些基本的用法，另外Sass还给我们提供了像@if和@else的条件语句，循环语句，自定义函数等其他的用法，这里不再详述，想了解的小伙伴们可以去Sass的中文网上查看。

→Sass官网

我不是安徒生

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Sass的安装以及使用

一，Sass简述首先什么是Sass？按照官方的说法，Sass是目前世界上最成熟，最稳定，最强大的专业级css扩展语言，注意是css的扩展语言。Sass是对CSS3（层叠样式表）的语法的一种扩充，我们可以认为是一款强化 CSS 的辅助工具（官方也是这样说的）。Sass本身的语法并不太容易让浏览器识别（虽然它和CSS的语法非常的像，几乎一样），因...
复制链接

扫一扫