笔记:关于SCSS的使用

笔记:关于SCSS的使用方法


刚接触scss的时候是有点懵逼的,对于scss的语法规则这个是没啥问题的,跟普通的css没啥区别,但就是不知道该如何使用,网页里直接使用.scss之类的方法是也试过了,没用。
后来,经过领导的点拨才突然明白过来了,完全是自己把这玩意想得太复杂了······
其实网页标签引入的还是css文件,只不过这个css文件是经过scss编译而来。

安装scss
具体方法流程可以打开sass网站安装流程查看。
咱这就简单的说一下。
1.首先要使用scss是需要安装Ruby
安装完成后需测试安装有没有成功,运行CMD输入以下命令:

ruby -v
//如安装成功会打印
ruby 2.6.4p104 (2019-08-28 revision 67798) [x64-mingw32]

安装失败或者网络故障之类的可以参考Sass网站说明。
2.Ruby自带一个叫做RubyGems的系统,用来安装基于Ruby的软件。我们可以使用这个系统来 轻松地安装Sass和Compass。要安装最新版本的Sass和Compass,你需要输入下面的命令:

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

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

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

OK,这些前置配置都做完成了的话,就可以开始进行Scss的代码编写了。

使用scss
sass的编译方式有多种方式,咱也不搞那么多花里胡哨的,就直接使用最简单的命令行编译方式。
首先打开cmd
然后cmd的路径切换到项目存放css文件的路径。

最后就是输入sass的命令了

//单文件转换命令
sass input.scss output.css

//单文件监听命令
sass --watch input.scss:output.css

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

我这边比较嫌麻烦,都是直接监听文件的目录,这样只要是这个文件夹内的任何scss文件有变动都会同时进行编译。

比如:我在监听的目录内创建一个scss文件的同时会自动生成同名称的.map以及.css的两个文件,.css就是项目需要引入的样式表文件。

开发过程中,此编译命令窗口不能关闭,不然就会停止编译。
当然,关闭了也没事,下次开启编译后,系统会监测当前scss文件与css文件,如果有差异,会自动编译新的css代码的。

恩。大致上就这些了,其他具体的可以进入sass的网站进行查看,scss的变量之类的用法,就需要各位自己去百度百度了,这里就不多说了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值