最近因为工作需要,自学了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的语法有很多资源都体积到了,在此就不赘述了。
推荐几处参考网站:

本文转载于:猿2048➥https://www.mk2048.com/blog/blog.php?id=hch0j1b21cb

学习笔记 - Sass的安装与使用手册的更多相关文章

  1. PHP学习笔记----IIS7下安装配置php环境

    原文:PHP学习笔记----IIS7下安装配置php环境 Php如何安装 Php版本的选择 Php在windows下的(php5.4.7)有两种版本: VC9 x86 Non Thread Safe ...

  2. openresty 学习笔记一:环境安装

    openresty 学习笔记一:环境安装 openresty 是一个基于 Nginx 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库.第三方模块以及大多数的依赖项.用于方便地搭 ...

  3. 学习笔记--Grunt、安装、图文详解

    学习笔记--Git安装.图文详解 安装Git成功后,现在安装Gruntjs,官网:http://gruntjs.com/ 一.安装node 参考node.js 安装.图文详解 (最新的node会自动安 ...

  4. Python3学习笔记01-环境安装和运行环境

    最近在学习Python3,想写一些自己的学习笔记.方便自己以后看,主要学习的资料来自菜鸟教程的Python3教程和廖雪峰官方网站的Python教程. 1.下载 1)打开https://www.pyth ...

  5. 树莓派学习笔记——apt方式安装opencv

    0.前言     本文介绍怎样在树莓派中通过apt方式安装opencv.并通过一个简单的样例说明怎样使用opencv. 相比于源码方式安装opencv,通过apt方式安装过程步骤简单些,消耗的时间也少 ...

  6. Git学习笔记--历史与安装(一)

    声明:今天起学习Git,第一篇学习笔记主要借鉴廖雪峰先生的个人博客,以及自己的实践所得. “本教程只会让你成为Git用户,不会让你成为Git专家”——引自廖雪峰博客. 一.Git简介 Git是目前世界 ...

  7. sass学习笔记 -- sass的四种编译方法

    sass的四种编译方法:(.scss) (一)ruby下的命令行编译 首先需要安装ruby,注意需勾选Add Ruby executables to your PATH选项,以添加环境变量. ruby ...

  8. Linux 学习笔记 2 Centos 安装与网络的配置以及VI编辑器的使用

    前言 当然,还是觉得Centos 在众多的Linux 发行版中,还是很有地位的,好多的服务器大多沿用的都是一代的Centos 因为它开源(这是废话)而且稳定,这才是服务器沿用的最重要的一项指标. 镜像 ...

  9. Maven学习笔记(1)之安装Maven

    此笔记是学习Maven时自己摸索+各种百度而来,并非全部原创,望与各位一同学习,勿拍~勿拍~ 安装步骤 1.下载Maven的最新版本,地址:http://maven.apache.org/downlo ...

随机推荐

  1. XML序列化反序列化

    using System; using System.Collections.Generic; using System.IO; using System.Xml.Serialization; nam ...

  2. python flask 入门

    1.入门案例.本质上还是一个socket from flask import Flask,request #### app=Flask(__name__) app.debug=True ####配置路 ...

  3. Element-UI tree 组件 点击后高亮显示的样式修改(背景色)

    感觉默认的高亮背景色颜色太浅,修改一下: .el-tree-node:focus > .el-tree-node__content { background-color: #ccc !impor ...

  4. pygame写俄罗斯方块

    代码搬运修改自python编写俄罗斯方块 更新时间:2020年03月13日 09:39:17 作者:勤勉之 from tkinter import * from random import * imp ...

  5. JavaScript面向对象—对象的创建和操作

    JavaScript面向对象-对象的创建和操作 前言 虽然说在JavaScript编程语言中,函数是第一公民,但是JavaScript不仅支持函数式编程,也支持面向对象编程.JavaScript对象设 ...

  6. Hystrix&Dashboard配置使用

    目录 Hystrix是什么 熔断 什么是熔断 熔断类型 打开 半开 关闭 使用方法 导包 添加启动注解 新增方法 测试 降级 什么是降级 使用方法 导包 修改yml,新增如下 启动类新增注解 @Ena ...

  7. Python时间处理,datetime中的strftime/strptime+pandas.DataFrame.pivot_table(像groupby之类 的操作)

    python中datetime模块非常好用,提供了日期格式和字符串格式相互转化的函数strftime/strptime 1.由日期格式转化为字符串格式的函数为: datetime.datetime.s ...

  8. JDBC 使用详解

    1.JDBC 编程步骤: 加载驱动程序; Class.forName(driverClass) 加载Mysql驱动:Class.forName("com.mysql.jdbc.Driver& ...

  9. java的https的get请求

    package com.wl.webservice; import java.io.InputStream; import java.net.HttpURLConnection; import jav ...

  10. markdown类型文件编辑大全

    正文: 1.标题的几种写法: 第一种:     前面带#号,后面带文字,分别表示h1-h6,上图可以看出,只到h6,而且h1下面会有一条横线,注意,#号后面有空格 第二种:      这种方式好像只能 ...