CSS預處理器Sass -- Sass工程的建立及sass文件編譯(3)

時間 2019-12-08

標籤 css 預處理 sass 工程建立文件編譯欄目 CSS 简体版

原文原文鏈接

前言：本節開始學習Sass的基礎語法。javascript

　　1.建立工程。css

　　　　<1>使用不帶參數的compass create 命令？java

　　　　　　cmd中運行compass create demo就建立成功了一個名爲demo的Sass工程。sass

　　　　　　工程結構：ruby

　　　　　　　　sass文件夾：存放項目中新建的.scss文件。學習

　　　　　　　　stylesheets：存放.scss編譯後的.css文件。字體

　　　　　　　　config.rb：ruby的配置項，配置項目編譯的入口和出口。ui

　　　　<2>使用帶參數的compass create新建工程？this

　　　　　　參數：spa

　　　　　　　　--bare （不包含默認樣式表進行安裝）；
　　　　　　　　--syntax sass （在默認樣式表中使用縮進語法）；
　　　　　　　　--sass-dir "cool" （使用'cool'目錄存放Sass文件）；
　　　　　　　　--css-dir "style" （使用'style'目錄存放CSS文件）；
　　　　　　　　--images-dir "img" （使用'img'目錄存放圖片）；
　　　　　　　　--fonts-dir "type" （使用'type'目錄存放字體文件）；
　　　　　　　　--javascripts-dir "js" （使用'js'目錄存放JavaScript文件）。

　　　　　　這些參數會修改config.rb中的配置文件。

　　2.使用命令編譯。

　　　　<1>使用sass命令編譯：

　　　　　　編譯Sass文件/文件夾？

　　　　　　　　命令：sass <sass file> <css file>

　　　　　　　　命令行中運行此命令，其中<sass file>表示要編譯的文件，<css file>表示生成目標CSS文件。

　　　　　　　　弊端：每次修改文件後都須要從新運行命令編譯。

　　　　　　監控Sass文件/文件夾實時編譯？

　　　　　　　　命令：sass --watch <sass file>:<css file>

　　　　　　　　命令行中運行此命令，其中<sass file>表示要監控的文件，<css file>表示生成目標CSS文件。

　　　　　　　　優點：每次修改sass文件後會自動編譯成CSS文件，無需從新運行命令。

　　　　　　指定Sass的編譯格式？

　　　　　　　　格式：nested、expand、compact、compressed。

　　　　　　　　命令：sass sass文件 css文件 -t ‘格式’

　　　　　　　　　　nested格式：sass demo.scss demo.css -t nested

    body {
      background-color: lightgray; }
      body header {
        font-size: 14px;
        color: red; }
      body section {
        font-weight: 600; }

　　　　　　　　　　expanded格式：sass demo.scss demo.css -t expanded

    body {
      background-color: lightgray;
    }
    body header {
      font-size: 14px;
      color: red;
    }
    body section {
      font-weight: 600;
    }

　　　　　　　　　　compact格式：sass demo.scss demo.css -t compact

    body { background-color: lightgray; }
    body header { font-size: 14px; color: red; }
    body section { font-weight: 600; }

　　　　　　　　　　compressed格式：sass demo.scss demo.css -t compressed

    body{background-color:lightgray}body header{font-size:14px;color:red}body section{font-weight:600}

　　　　<2>使用compass命令編譯：

　　　　　　compass compile編譯sass文件：

　　　　　　在當前工程目錄下運行compass compile命令，compass會根據config.rb配置文件找到sass、css配置文件入口進行編譯。

　　　　　　 注意：compass compile命令只會編譯修改了的文件，沒有修改的文件不會再次編譯。

　　　　　　若是須要強制編譯全部sass文件，使用命令 compass compile --force

　　　　　　 弊端：每次修改文件後須要從新運行命令編譯。

require 'compass/import-once/activate'
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"　　　　//表示CSS文件存放位置
sass_dir = "sass"　　　　　　　//表示sass文件的存放位置
images_dir = "images"
javascripts_dir = "javascripts"

　　　　　　compass watch監控sass文件：

　　　　　　在當前工程目錄下運行compass watch命令，會實時編譯全部變化了的sass文件。

　　　　　　compass watch --force會編譯全部sass文件，包括未變化的也會進行編譯。

　　　　　　注意：compass命令指定輸出格式(nested compressed expanded compact)時，使用參數-s而非-t。

　　3.理解config.rb配置項含義。

　　　　各配置項的含義：

require 'compass/import-once/activate'
# Require any additional compass plugins here.
environment = :development
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"         # 表示css生成文件的存放目錄
sass_dir = "sass"               # 表示sass文件的存放目錄
images_dir = "images"           # 表示圖片文件的存放目錄
javascripts_dir = "javascripts" # 表示JavaScript文件的存放目錄

# You can select your preferred output style here (can be overridden via the command line):
# 表示生成的css的壓縮風格，若是是開發環境就使用expanded，不然就使用compressed
output_style = (environment == :development) ? expanded : compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true        # 表示是否使用絕對路徑

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false         # 表示是否使用行註釋