compass編譯
『壹』 compass 編譯 出 css 默認有注釋
你好,這個問題其實不難,只需要簡單的修改下compass的配置就可以了
1、打開項目根目錄下的 config.rb 文件
2、搜索 line_comments 關鍵詞,默認應該是 # line_comments = false
3、去掉前面的 #,保存 config.rb
4、重新執行 compass compile
這樣編譯出來的 css 文件中就不會包含自動生成的行注釋信息了。
希望能幫你解決問題,望採納~~
『貳』 用compass編譯sass,進入目錄後執行compass watch 後然後書寫scss文件卻沒有進行編譯,這是怎麼回事呢
您好,這樣的:
Sass的安裝:
1.安裝:SASS是Ruby語言寫的,但是兩者的語法沒有關系。不懂Ruby,照樣使用。只是必須先安裝Ruby,然後再安裝SASS。
假定你已經安裝好了Ruby,接著在命令行輸入下面的命令:
gem install sass
然後,就可以使用了。
2:使用:
SASS文件就是普通的文本文件,裡面可以直接使用CSS語法。文件後綴名是.scss,意思為Sassy CSS。SASS提供兩種編譯方式,一種是手動編譯,一種是監視編譯(–watch),手動編譯就是當你撰寫好CSS時下指令去做編譯,監視編譯則是你指令一個目錄,當此目錄裡面的*.scss檔案有改變時(新增、覆寫等等),就會自動去做編譯的動作。先來講手動編譯方式:
下面的命令,可以在屏幕上顯示.scss文件轉化的css代碼。(假設文件名為test。)
sass test.scss
如果要將顯示結果保存成文件,後面再跟一個.css文件名。
sass test.scss test.css
SASS提供四個編譯風格的選項:
* nested:嵌套縮進的css代碼,它是默認值。
* expanded:沒有縮進的、擴展的css代碼。
* compact:簡潔格式的css代碼。
* compressed:壓縮後的css代碼。
生產環境當中,一般使用最後一個選項。
sass –style compressed test.sass test.css
還有一種監視的方式做編譯,在命令行中切換到當前sass或者scss文件所在的目錄,然後運行
sass –watch scss:css
SASS的官方網站,提供了一個在線轉換器。你可以在那裡,試運行下面的各種例子。
Compass的安裝:
1.安裝:安裝ruby之後,輸入命令
gem install compass
2.使用:創建一個 COMPASS 項目
在命令行中切換到你需要創建項目的目錄,運行:
compass create "projectname"
這個命令會創建一個包含一系列文件的目錄,其中最重要的是配置文件 config.rb,其他文件如果你不需要都可以刪除。
在 config.rb 中你可以修改 SASS 和 CSS 的目錄及其它一些基礎設置。
實時編譯 SASS 文件
COMPASS 提供的默認方法是:
在命令行下切換到項目目錄,運行
compass watch
COMPASS 將會實時監控 SASS 目錄的文件變化,只要你一保存文件,立即將相應文件編譯為 CSS 文件。
『叄』 Compass的簡介
CSS預處理器(CSS Preprocessor),是一種構架於css之上的高級語言,可以通過腳本編譯生成CSS代碼,其目的是為了讓CSS開發者的工作更簡單有趣,當前已經進入了較為成熟的階段,基本上新的web開發項目大都已普遍使用。
現在最主要的選擇有: SASS 2007年誕生,最早也是最成熟的CSS預處理器,擁有ruby社區的支持和compass這一最強大的css框架,目前受LESS影響,已經進化到了全面兼容CSS的SCSS,著名的Twitter Bootstrap就是採用SASS做底層語言的。 LESS 2009年出現,受SASS的影響較大,但又使用CSS的語法,讓大部分開發者和設計師更容易上手,在ruby社區之外支持者遠超過SASS,其缺點是比起SASS來,可編程功能不夠,不過優點是簡單和兼容CSS,反過來也影響了SASS演變到了SCSS的時代。 Stylus,2010年產生,來自Node.js社區,主要用來給Node項目進行CSS預處理支持,在此社區之內有一定支持者,在廣泛的意義上人氣還完全不如SASS和LESS。 推崇的組合是,SASS+Compass+Twitter Bootstrap+bootstrap-sass,這一組合能夠獲得最好的底層語言SASS,最好的框架Compass,和Bootstrap提供的最強大的UI組件庫(被bootstrap-sass翻譯成SASS的風格)。
『肆』 keyframes在compass里怎麼寫會自動編譯帶有瀏覽器前綴的css
引起修改維護巨大工作量的原因就是html5標准未在各個瀏覽器上標准統一實現,各個瀏覽器加入了自己的前綴來實現支持,這就造成了實際開發中去對各個瀏覽器兼容而產生了巨大的工作量。而解決這一問題的辦法無疑是去用javascript來規避瀏覽器前綴帶來的麻煩。
『伍』 compass創建項目生成的-sass-cache有什麼作用可以刪除嗎
緩存相關的東西,預處理器編譯一次就會生成,可以刪除,但是下次再編譯的時候還會產生的,所以就放那好了,產品要發布的時候只要css就可以了。
『陸』 如何用grunt創建compass和自動刷新
在grunt serve啟動時當.sass文件發生變化時,自動編譯更新.css文件
HOWTO
我覺得你首先要弄明白是哪個任務使得grunt serve任務執行時能夠檢查文件變化並進行編譯。
在這里是watch這個task,關於grunt-contrib-watch請點擊查看文檔
TODO
在watch的任務中需要指定對.sass文檔的編譯任務
這里參考grunt-contrib-watch的官方給出的代碼
https://github.com/gruntjs/grunt-contrib-watch/blob/master/docs/watch-examples.md#enabling-live-reload-in-your-html
grunt.initConfig({
sass: {
dev: {
src: ['src/sass/*.sass'],
dest: 'dest/css/index.css',
},
},
watch: {
sass: {
// We watch and compile sass files as normal but don't live reload here
files: ['src/sass/*.sass'],
tasks: ['sass'],
},
livereload: {
// Here we watch the files the sass task will compile to
// These files are sent to the live reload server after sass compiles to them
options: { livereload: true },
files: ['dest/**/*'],
},
},
});
CONCLUSION
好好讀讀grunt-contrib-watch的官方文檔,你要的都在裡面
『柒』 為什麼要用compass
作者:劉雄
鏈接:http://www.hu.com/question/31247883/answer/52151193
來源:知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請註明出處。
問題是「為什麼要使用 compass」,我更想回答的是「為什麼不使用 sass」。
最早的時候,公司里的項目對於 sass 和 less 都有實踐,stylus 也有很少的一部分,在不到兩年的時間里,現在基本上所有的項目都是使用 less.
sass 和 less 在語言特性上並沒有太大的區別,主要的區別點是前者基於 ruby, 而後者基於 nodejs。現階段前端所有的工程環境基於 node 都可以基本搞定,諸如用 php 寫 demo 的方式已逐漸退出前端的視線,因此,一套 node 環境已足以滿足需求,為了 sass/compass 再引入一個 ruby 的環境完全沒有意義。
在多人合作中,sass 需要配置 ruby, gem, 甚至需要更換 gem 源,對於大多數人來講,這並非什麼難事,但我遇到過 N 多次,同事在接手項目時因為 ruby 的版本,sass 的編譯問題消耗大量時間。當然,現在也有 node-sass 這樣的工具,但是在我的嘗試過程中體驗並不好(因為 node 版本會報錯)。
棄用 compass 之後,帶來的唯一問題是 sprite 的功能,至今我也沒找到一個比 compass 更強大的 sprite 工具,不過,隨著 iconfont 的興起,使用 sprite 的場景越來越少,自己用 ps 去合一下成本很低,因此也就沒什麼好憂傷的了。
『捌』 如何安裝Compass
一、Compass是什麼?
簡單說,Compass是Sass的工具庫(toolkit)。
Sass本身只是一個編譯器,Compass在它的基礎上,封裝了一系列有用的模塊和模板,補充Sass的功能。它們之間的關系,有點像Javascript和jQuery、Ruby和Rails、python和Django的關系。
Compass是用Ruby語言開發的,所以安裝它之前,必須安裝Ruby。
二、安裝Ruby
Windows下可以選擇安裝RubyInstaller for Windows,我選擇的版本是Ruby 2.1.7。
三、修改gems源地址
由於網路原因,需要將原裝gem源地址轉化為穩定的鏡像地址:
$ gem sources --add https://ruby.taobao.org/ --remove https://rubygems.org/
四、安裝Compass
$ gem update --system
$ gem install compass
五、使用Compass
$ compass create myproject
『玖』 我為什麼不再用Compass寫CSS
我不得不承認,CSS非常棒,但是預設的語法絕對的爛。你是不是也厭倦了CSS的書寫方式呢?特別是當項目越來越大,代碼堆積越來越多的時候。如果我們還是繼續這種愚蠢的編碼方式,那麼對於CSS開發的人員來說。絕對是一個不省心的工作!
而當CSS編譯器真正來到的時候,完全改變了我們的工作方式。今天我們將要講解使用CSS編譯器的諸多好處並且介紹你如何能夠真正在工作中有效使用它。
Time to keep it simple, no time for the stupid!
會議一下作為前台開發人員,你寫過多少次這樣的代碼?
ul { padding: 0px; margin: 0px; }
ul li { padding: 0px 5px; }
ul li a { color: #335345; }
ul li span { color: #434343; }
或許你也感嘆過,我到底要寫多少個ul li阿? 真是無用功!
沒錯,的確是!
那麼對於顏色,字體大小,或者margin/padding這些在CSS中隨時重復的東西。試想一下,你如果想修改一些東西,確發現,你要修改的東西到處都有。這樣情況大家都遇到過!絕對是噩夢!
你的樣式表裡的樣式呢?是不是已經厭倦了老是使用同樣的樣式?修改樣式?兄弟,這可不是簡單的活兒!
怎麼去解決這樣的問題呢? SASS!
編譯CSS?什麼?沒搞錯吧?
不要大驚小怪!如果你不是一個熟悉終端的開發者,或者說是windows中的cmd。那麼這里有很多的解決方案可能讓你放棄選擇終端來管理項目。不過這里讓我們退一步說。
SASS賦予你修改你的CSS並且生成真正的CSS文件的能力。簡單說來,它就是察看SASS文件,並且生成正確的CSS文件。
那麼,如果你需要修改CSS,那麼你就使用命令通過SASS文件來直接生成CSS文件。一旦你保存了SASS文件。就不需要管理CSS文件了。因為只需要花幾秒,你就能生成需要的CSS。當然你需要時間來熟悉這些,不過對於開發來說,絕對值得!
樣式嵌套
首先最讓我喜歡的SASS和SCSS的地方在於語法擁有樣式嵌套。這使得和你的樣式結合使用起來非常的簡單。例如,你有如下HTML:
link 1
link 2
在SASS中,你將能夠書寫如下結構:
ul {
padding: 0px;
margin: 0px;
width: 210px;
li {
float: left;
width: 100px;
margin: 0px 10px 0px 0px;
&.last {
margin: 0px;
}
a {
color: #232323;
&:hover {
color: #121212;
}
}
}
}
是不是非常的清楚? 最後你可以使用HTML里方式來嵌套你的CSS。你可以使用任何CSS選擇器來使得流程更加簡單!
我同樣也添加了一些在SASS中經常使用的很多不錯特性: "&" 標號。這個將告訴SASS來設定一個額外的規則。因此使用class .last定義的li元素將使用這個方法。不用去創建一個新的規則。懸浮的anchor標簽也同樣使用這個方法。非常實用!
變數,Mixin和選擇器繼承
樣式代碼片斷的重用使得CSS非常的動態,這也是SASS最擅長的。
變數很簡單。定義並且使用在你的SASS文件中:
$background: #040404;
$text-color: #fefefe;
$standard-margin: 16px;
body {
background-color: $background;
color: $text-color;
input {
background-color: $background;
color: $text-color;
margin: $standard-margin;
}
}
定義了一個變數$varname:value並且在代碼中使用$varname。
Mixin有點兒像變數但是主要為了樣式片斷。你可以告訴SASS沖用一部分的代碼片斷並且包含在樣式里。你甚至可以指定參數使得他們動態。就像你給CSS寫方法一樣。
@mixin ptsans {
font-family: 'PT Sans', sans-serif;
}
@mixin absolute-positioned($top, $left) {
position: absolute;
top: $top;
left: $left;
}
body {
@include ptsans;
position: relative;
#notifier {
@include absolute-positioned(20px, 100px);
}
}
使 用@mixin mixinname{這里寫樣式}來定義一個mixin ,或者使用@mixin mixinname($parameter1){somestyle:$parameter1}。非常適合重復的樣式和CSS3的fallback內容。 你可以添加很多的樣式到mixin里然後很方便的重用。
最後要說的是selector繼承。這允許你像mixin那樣取得一段樣式,並且繼承擴展它。這樣你可以在實際的CSS中放入同樣的代碼,但是擴展CSS規則。這里舉一個例子:
CSS源代碼:
.error, .succes {
border: 1px solid black;
padding: 5px;
color: red;
}
.succes {
color: green;
border-color: green;
}
SCSS:
.error {
border: 1px solid black;
padding: 5px;
color: red;
}
.succes {
.error;
color: green;
border-color: green;
}
是不是簡單明了。