SASS用法指南

2022-01-11 12:37:47 字數 1051 閱讀 7873

學過css的人都知道,它不是一種程式語言。

你可以用它開發網頁樣式,但是沒法用它程式設計。也就是說,css基本上是設計師的工具,不是程式設計師的工具。在程式設計師眼裡,css是一件很麻煩的東西。它沒有變數,也沒有條件語句,只是一行行單純的描述,寫起來相當費事。

很自然地,有人就開始為css加入程式設計元素,這被叫做"css預處理器"(css preprocessor)。它的基本思想是,用一種專門的程式語言,進行網頁樣式設計,然後再編譯成正常的css檔案。

各種"css預處理器"之中,我自己最喜歡sass,覺得它有很多優點,打算以後都用它來寫css。下面是我整理的用法總結,供自己開發時參考,相信對其他人也有用。

sass用法指南

一、什麼是sass

sass是一種css的開發工具,提供了許多便利的寫法,大大節省了設計者的時間,使得css的開發,變得簡單和可維護。

本文總結了sass的主要用法。我的目標是,有了這篇文章,日常的一般使用就不需要去看官方文件了。

二、安裝和使用

2.1 安裝

sass是ruby語言寫的,但是兩者的語法沒有關係。不懂ruby,照樣使用。只是必須先安裝ruby,然後再安裝sass。

假定你已經安裝好了ruby,接著在命令列輸入下面的命令:

gem install sass

然後,就可以使用了。

也可以使用npm來安裝,npm install -g sass

sass --version

1.30.0 compiled with dart2js 2.10.4

if you are using the sass ruby gem to compile, you can enable source maps with the following terminal command:

sass style.scss:../css/style.css --sourcemap

Sass用法指南

一 安裝和使用 1.1 安裝 sass是ruby語言寫的,但是兩者的語法沒有關係,只是必須先安裝ruby,然後安裝sass.假設你已安裝了ruby,命令列安裝 gem install sass 1.2 使用 將.sass檔案轉化為css sass test.scss 如果要將顯示結果儲存成檔案,後面...

css框架 SASS用法指南

一 什麼是sass sass是一種css的開發工具,提供了許多便利的寫法,大大節省了設計者的時間,使得css的開發,變得簡單和可維護。本文總結了sass的主要用法。我的目標是,有了這篇文章,日常的一般使用就不需要去看官方文件了。二 安裝和使用 2.1 安裝 sass是ruby語言寫的,但是兩者的語法...

SQLAlchemy用法指南

資料庫操作都存在4個基本的功能,增 讀 改 刪 crud 增 db.session.add 讀 使用model.query model.query是db.session.query model 的簡寫 model.query.all 資料庫中所有行 model.query.limit 10 all ...