sass學習 在htm檔案中使用

2022-07-26 06:03:14 字數 1624 閱讀 5762

最近的戰狼2好火爆啊,每天看戰狼2的票房一路高飆,我估計比吳京還開心。看了這部戲的拍攝過程,除了敬佩就是踏實,是的,吳京是電影圈隔了這麼久後能踏踏實實做電影的了,純屬個人見解,不喜請忽略。。。。。。。。。。。。。。。。。。。。。

說道踏實,好吧,我要把基礎給踩踩了,說說最簡單的sass是怎麼在html中執行的

二、正文(文中編輯器使用webstorm)

1、建立專案untitlecl(如此隨意,我連預設名都懶得改了,,,,,,,),再建立h5格式的html   textsass.html   

2、textsass.html

引入sass的樣式檔案,注意引入時,要寫.css的字尾名而不是.sass的字尾名

3、建立sass格式的檔案

4、編寫sass檔案的樣式

5、控制台輸入  sass common.sass  (common為sass檔案的樣式名)可在控制台上看到編譯成功後的css檔案

6、將sass檔案編譯成css置放於專案中,可使用命令  sass common.scss common.css   

自動編譯後生成在專案中結構如下:

7、執行專案可看到效果

8、我們不可能每次改某個樣式,都要重新 sass common.scss common.css  一下吧,所以有個監聽方法 sass --watch common.sass:common.css

這樣每次一修改樣式,重新整理下瀏覽器,就能看到最新的效果了。

若是要監聽整個專案的樣式,則使用命令 sass --watch stylesheets/sass:stylesheets/css

9、sass提供四個編譯風格的選項:

1)、nested:巢狀縮排的css**,它是預設值。

2)、expanded:沒有縮排的、擴充套件的css**。

3)、compact:簡潔格式的css**。

4)、compressed:壓縮後的css**。

一般生產環境中使用最後乙個 sass --style compressed test.sass test.css

三、結尾

邊琢磨邊寫的,肯定有許多bug,歡迎指出

在Vue中使用Sass

sass 是什麼?sass又稱scss,它是css預處理之一。它在css語法的基礎上增加了變數 巢狀 混合巨集 繼承 佔位符等等高階功能。那什麼是css預處理器呢?簡單理解就是,css預處理是一種專門的程式語言,通過該語言進行web頁面設計,然後再編譯成正常的css檔案,以供專案使用。css預處理器...

在ubuntu使用sphinx編寫html文件

sphinx簡介 sphinx 1 是乙個工具,它能夠輕易地建立智慧型和優雅的文件,出自georg brandl之手,在bsd許可證下授權。它能夠把一組 restructuredtext 格式的檔案轉換成各種輸出格式,而且自動地生成交叉引用,生成目錄等。也就是說,如果有乙個目錄,裡面包含一堆rest...

在Shell中使用函式檔案,引入檔案

需要編寫乙個較龐大的指令碼時,可能會涉及許多函式 變數。這是通常建議將眾多的函式 變數放入乙個單獨的指令碼內。這樣做的好處很明顯,不用擔心某個函式 變數是否已經被定義和使用,也不用頻繁地定義 清除函式和變數。函式檔案的格式和指令碼檔案一樣。root localhost shell cat funct...