为了账号安全,请及时绑定邮箱和手机立即绑定

Sass的入门安装和基本使用方法

2020.01.06 16:22 6284浏览

前言

Sass 是一个 CSS 预处理器,可以帮助我们减少 CSS 重复的代码,节省开发时间。 扩展了 CSS3,增加了规则、变量、混入、选择器、继承、内置函数等等特性。生成良好格式化的 CSS 代码,易于组织和维护,Sass 文件后缀为.Scss。

一、Sass安装

NPM 安装

1.1 我们可以使用npm来安装 Sass,这是最常用的安装方式。
首先查看有没有下载npm,以下命令可以查看到是否有下载过npm,已经下载会出现一个版本号 6.12.1

npm -v

1.2 sass一般都使用淘宝 NPM 镜像定制的 cnpm,命令行工具代替默认的npm:只需要安装以下命令就会自动下载安装一个包。

npm install \-g cnpm \--registry\=https://registry.npm.taobao.org

1.3 然后就可以使用cnpm命令使用这个包,以下就算安装完成了。

cnpm install -g sass

二、sass的使用方法

2.1 首先要建立2个文件夹,文件夹名称可以随便起,再启动以下命令监听。

sass --watch sass:css  //(sass:css为文件夹名称,可以自设定)


2.2 在.scss 文档写入内容,另外一个css文件夹就会自动出现一个css的文档,在写代码时命令窗口不能关闭,负责无法执行css文档代码。


2.3 下面是案例 .scss文档代码:

$a:#fff;
$b:#000;

body {
    color: $a;
    background: $b;
    width: 500px;
    height: 100px;
}

会在.css文档出现以下执行代码:

body {
  color: #fff;
  background: #000;
  width: 500px;
  height: 100px;
}

/*# sourceMappingURL=a.css.map */

三、sass的变量

3.1 Sass 变量使用$符号:变量用于存储一些信息,它可以重复使用。
Sass 变量可以存储以下信息:

  • 字符串
  • 数字
  • 颜色值
  • 布尔值
  • 列表
  • null 值

3.2 以下实例设置了四个变量:myFont, myColor, myFontSize, 和 myWidth。
变量声明后我们就可以在代码中使用它:

$myFont:Helvetica,sans-serif;  
$myColor:red;  
$myFontSize:18px;  
$myWidth:680px;  
  
body{  
font-family:$myFont;  
font-size:$myFontSize;  
color:$myColor;  
}  
  
#container{  
width:$myWidth;  
}

将以上代码转换为 CSS 代码,如下所示:

body{  
font-family:Helvetica,sans-serif;  
font-size:18px;  
color:red;  
}  
  
#container{  
width:680px;  
}

3.3 Sass变量的作用域,只能在当前的层级上有效果,如下所示 h1 的样式为它内部定义的 green,p 标签则是为 red。

$myColor:red;  
  
h1{  
$myColor:green;// 只在 h1 里头有用,局部作用域  
color:$myColor;  
}  
  
p{  
color:$myColor;  
}

将以上代码转换为 CSS 代码,如下所示:

h1{  
color:green;  
}  
  
p{  
color:red;  
}

四、Sass 嵌套规则与属性

4.1 Sass 嵌套 CSS 选择器类似于 HTML 的嵌套规则。
如下我们嵌套一个导航栏的样式:

nav{  
  ul{  
margin:0;  
padding:0;  
list-style:none;  
}  
  li{  
display:inline-block;  
}  
  a{  
display:block;  
padding:6px12px;  
text-decoration:none;  
}  
}

实例中,ul, li, 和 a 选择器都嵌套在 nav 选择器中
将以上代码转换为 CSS 代码,如下所示:

nav ul{  
margin:0;  
padding:0;  
list-style:none;  
}  
nav li{  
display:inline-block;  
}  
nav a{  
display:block;  
padding:6px12px;  
text-decoration:none;  
}

4.2 Sass嵌套属性很多,在 Sass中,我们可以使用嵌套属性来编写它们,会省事很多,以下sass的代码如下:

font:{  
  family:Helvetica,sans-serif;  
size:18px;  
  weight:bold;  
}  
  
text:{  
  align:center;  
  transform:lowercase;  
overflow:hidden;  
}

将以上代码转换为 CSS 代码,如下所示:

font-family:Helvetica,sans-serif;  
font-size:18px;  
font-weight:bold;  
  
text-align:center;  
text-transform:lowercase;  
text-overflow:hidden;

总结:

以上是sass的基本简单介绍,sass还有比较深入复杂的方法,大家也可以去sass官网深入学习,网址:https://www.sasscss.com/getting-started/


作者:汤清丽

日期:2020-1-6

微信:lenat666

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消