资讯专栏INFORMATION COLUMN

学习笔记 - Sass的安装与使用手册

Jeff / 1616人阅读

摘要:现在将学习笔记整理在这里,供大家参考。的安装的编辑器安装方法有很多,大致能分为两种应用程序和命令行界面。如果已经安装过,也可以使用指令如果提示权限不足,在命令行前加上即可。参考网页编辑器的使用的使用很简单,记住两条指令即可。

最近因为工作需要,自学了Sass。现在将学习笔记整理在这里,供大家参考。

1. Sass的安装

Sass的编辑器安装方法有很多,大致能分为两种:应用程序(application)和命令行界面(command line)。我使用的是命令行。因为之前已经在Mac上安装过Homebrew的package,用的命令行是

brew install sass/sass/sass

Homebrew对系统xCode版本有要求,如遇提示xCode版本过低,在App Store下载更新软件,或者直接卸载软件都可以。

如果已经安装过node.js,也可以使用npm指令

npm install -g sass

如果提示权限不足,在命令行前加上sudo即可。

参考网页 https://sass-lang.com/install

2. Sass编辑器的使用

Sass的使用很简单,记住两条指令即可。
第一条指令如下,意思是编辑input.scss,并输出储存在output.css文件中。指令只编译一次。

sass input.scss output.css

第二条指令增加了一个watch功能。同上述指令,编译input.scss储存至output.css。指令编译多次,适用于开发过程中的编译。.scss文件的改动会被检测(watch)并立即编译写入相应的.css文件中。

sass --watch input.scss output.css

3. 其他

Sass的语法有很多资源都体积到了,在此就不赘述了。
推荐几处参考网站:

Sass Basics Sass官方语法 https://sass-lang.com/guide

Sassmeister 官方Sass在线编辑器 https://www.sassmeister.com/

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114000.html

相关文章

  • 个人文章分类整理

    摘要:春节闲来无事,看看自己在上写的文章,想不到已经篇了,各方面的都有,那就分类整理一下吧,也方便自己和别人查看。 春节闲来无事,看看自己在SegmentFault上写的文章,想不到已经20篇了,各方面的都有,那就分类整理一下吧,也方便自己和别人查看。 CSS CSS Background-Size 属性小记 [译]关于垂直居中 Vertical Align 的探讨 [译]CSS 居中(...

    OnlyLing 评论0 收藏0
  • 个人文章分类整理

    摘要:春节闲来无事,看看自己在上写的文章,想不到已经篇了,各方面的都有,那就分类整理一下吧,也方便自己和别人查看。 春节闲来无事,看看自己在SegmentFault上写的文章,想不到已经20篇了,各方面的都有,那就分类整理一下吧,也方便自己和别人查看。 CSS CSS Background-Size 属性小记 [译]关于垂直居中 Vertical Align 的探讨 [译]CSS 居中(...

    v1 评论0 收藏0
  • 个人文章分类整理

    摘要:春节闲来无事,看看自己在上写的文章,想不到已经篇了,各方面的都有,那就分类整理一下吧,也方便自己和别人查看。 春节闲来无事,看看自己在SegmentFault上写的文章,想不到已经20篇了,各方面的都有,那就分类整理一下吧,也方便自己和别人查看。 CSS CSS Background-Size 属性小记 [译]关于垂直居中 Vertical Align 的探讨 [译]CSS 居中(...

    nidaye 评论0 收藏0
  • 个人文章分类整理

    摘要:春节闲来无事,看看自己在上写的文章,想不到已经篇了,各方面的都有,那就分类整理一下吧,也方便自己和别人查看。 春节闲来无事,看看自己在SegmentFault上写的文章,想不到已经20篇了,各方面的都有,那就分类整理一下吧,也方便自己和别人查看。 CSS CSS Background-Size 属性小记 [译]关于垂直居中 Vertical Align 的探讨 [译]CSS 居中(...

    heartFollower 评论0 收藏0
  • Laravel学习笔记三-前端工作流

    摘要:本节将学习是如何利用形成一套完整的前端工作流模式的。你也可以使用下面命令来强制安装所有模块,不管该模块之前是否安装过由于国内墙的原因,使用安装会非常缓慢,慢到想切,不过还好,我们可以使用淘宝提供的国内镜像进行下载。 本节将学习 Laravel 是如何利用 Sass, NPM, Gulp形成一套完整的前端工作流模式的。 一、句法强大的样式表Sass Sass 是一种可用于编写CSS的语言...

    liuchengxu 评论0 收藏0

发表评论

0条评论

Jeff

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<