SASS的安装与使用

摘要:
通过使用命令行工具或WEB框架插件,可以将其转换为标准且格式良好的CSS代码。因此,建议使用淘宝图像安装。3.使用淘宝形象安装sass。首先删除默认源:sass-h。4.通过git方法安装sass gitclone:

  一、sass简介

    1.SASS是CSS3的一个扩展,增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。

    2.SCSS即是SASS的新语法,是Sassy CSS的简写,是CSS3语法的超集,也就是说所有有效的CSS3样式也同样适合于SASS。

  二、sass的安装与配置

    1.安装Ruby

      因为sass依赖rubby环境,所以装sass之前必须确保装了rubby。

      ruby官方网站下载地址: http://rubyinstaller.org/downloads

      ruby为傻瓜式安装,这里就不做详细讲解。在安装的时候注意,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译

    软件的时候会提示 找不到ruby环境。 

 

    2.通过ruby命令安装sass

      打开ruby命令行,在命令行中输入gem install sass

      SASS的安装与使用第1张

      *注意:一般情况下通过这种方法是安装不成功的,因为墙比较厉害,所以推荐使用淘宝镜像安装

    3.淘宝镜像安装sass

      首先移除默认的源:$ gem sources --remove https://rubygems.org/

      添加淘宝的源:$ gem sources -a https://ruby.taobao.org/

      如果你系统不支持https, 请将淘宝源更换成: gem sources -a http://gems.ruby-china.org 】

      查看当下使用的源是哪个:$ gem sources -l

      查看sass的版本:sass -v

      如果sass版本过低,可以通gem updata sass更新sass

      帮助命令:sass -h

    4.通过git方法安装sass

      git clone git://github.com/nex3/sass.git

      cd sass

      rake install

  三、SASS的编译

    sass编译的方式有很多种,这里介绍三种常用的:

      1.通过命令行的方式进行编译

      2.通过webstorm开发工具进行编译

      3.通过gulp集成编译/kaola

    1.通过命令行的方式进行编译

      ①sass scss目录地址:输出目录地址

        如:sass scss/main.scss:style/main.css

      ②SASS命令行工具可以对目录进行自动监视, 这样我们的目录下的文件发生了变化, SASS帮助我们自动编译。

       通过 --watch命令让sass工具自动监视目录, 并自动进行编译。

         语法: sass --watch 监视的目录地址: 自动编译的目录地址

      ③通过 --style nested(嵌套-默认)|compact(紧促型)|compressed(压缩)|expended(扩展) 命令, 可以为sass生成css样式指定生成的格式

       如:sass --watch watchdir:outputdir --style nested|compact|compressed|expended

    2.通过webstorm开发工具进行编译

      ①打开files下边的seetings选项

       SASS的安装与使用第2张

      ②打开Tools下面的file watchers选项,如下图所示,点击右上角的+号,选中SCSS,进入配置界面,根据需要编辑需要修改的参数,最后点击ok添加。

      SASS的安装与使用第3张

      配置界面

      SASS的安装与使用第4张

      ③新建一个scss文件,就可以进行编辑了,这时我们会发现在demo.scss目录下会生成一个demo.css的文件,也就是说webstorm自动为我们生成了相应的css文件。

      SASS的安装与使用第5张

      ④我们在html页面引入样式时,直接引入css文件即可

      *注意:这里引入demo.css的时候demo.css和demo.scss其实是同一级的,引入方法如下图所示

      SASS的安装与使用第6张

    3.通过gulp进行集成编译

      由于gulp内容较多,因此放到下一节详细讲解。

  小结:以上内容操作完成后,就可以进行我们的sass开发了,希望能帮到需要的朋友,下节将会讲到sass的语法结构。

      

免责声明:文章转载自《SASS的安装与使用》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇简易google地图api调用ZJOI 2019 划水记下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

anaconda命令行

anaconda命令行 命令行查看版本:conda –version 升级所有工具包:conda upgrade –all conda env --help #查看帮助 安装第三方包 安装第三方包:conda install requests 或者 pip install requests卸载第三方包:conda remove requests 或者 pi...

Redis发布与订阅

Redis 通过 PUBLISH 、 SUBSCRIBE 等命令实现了订阅与发布模式, 这个功能提供两种信息机制, 分别是订阅/发布到频道和订阅/发布到模式。  举个例子: 当右边窗口执行了后, 一、频道的订阅与信息发送 Redis 的 SUBSCRIBE 命令可以让客户端订阅任意数量的频道, 每当有新信息发送到被订阅的频道时, 信息就会被发送给所有...

Yarn对外接口

1 概述 Yarn对外接口 https://forum.huawei.com/enterprise/zh/forum.php?mod=viewthread&tid=451687 本文档专供需要对Yarn进行应用开发的用户使用。本指南主要适用于具备Java开发经验的开发人员。 简介 Yarn是一个分布式的资源管理系统,用于提高分布式的集群环境下的资源...

激活windows专业版(激活windows10专业版,解决“我们无法在此设备上激活windows因为无法连接到你的组织的激活服务器 ”)

本来系统用的好好的,但是前几天系统突然提示我要去取设置里面激活windows,我就想:我的系统好像是原厂正版的吧,怎么就过期了呢?没办法只能搜索下怎么激活,去系统城,各大网站什么的试了好多密钥全部不行。最后找到了一个能用的,今天记录一下 Solution 以管理员身份打开cmd 然后 slmgr.vbs -skms zh.us.to粘贴进去运行,好了之后去...

4.14Java游戏小项目之键盘控制原理

4.14Java游戏小项目之键盘控制原理本质理解 键盘和程序交互原理: 每次按下键、松开键触发响应的键盘事件。 按下和松开用true和false表示 将事件封装到KeyEvent对象中 识别按下哪个键就是对键盘进行编号 编号通过KeyEvent对象来查询 本项目有四个方向,设置四个基本方向,按下=true,松开=false,左右移动只需要对其进行加、...

CetOS 服务不支持 chkconfig 的解决方法

  今天在添加Elasticsearch系统自动启动服务的时候,提示 “服务 elasticsearch 不支持 chkconfig ”,如下图:           后来查找了下原因,是脚本编写的不符合规范,缺少关键的前三两行;   那么前三行是什么作用呢?   示例,前三行如下: #!/bin/bash #chkconfig: 2345 80 90...