sass學習之路(一)

2021-09-16 21:50:55 字數 778 閱讀 6010

前言

欲善其事,先利其器。提高前端的工作效率,工具的使用時必不可少,最近正在鼓搗sass,做做筆記(大神請繞道),如果有什麼地方寫錯,請務必指出。道理都懂,廢話不多說,搞正事!!!

環境依賴

sass工具是基於ruby編寫的,所以首先得在計算機上安裝ruby安裝完畢後,開啟選單,找到start command prompt with ruby終端命令列工具,開啟後輸入命令

gem install sass compass
安裝成功後執行命令

sass -v
compass -vgem sources -r

然後新增**的源:

gem sources -a
替換成功後,再執行安裝sass和compass就可以了!

簡單的sass命令

手動建立乙個全英文路徑的專案做乙個簡單的測試,目錄結構如下:

在hellosass目錄下開啟命令列

先暫時記這些,等學到後面再繼續分享。。。

Sass 初級學習一

1 首先 sass是由ruby開發,這塊windows安裝sass可以先安裝ruby程式,再通過包管理命令來安裝ruby windows 命令列工具安裝 gem install sass 2 將scss檔案編譯成css 我們在使用的過程中,最終會將scss檔案轉為css,這塊我們使用vscode進行...

Sass學習筆記 Sass的編譯

命令列編譯 gui 介面工具編譯 一般教程 ide自助編譯 webstorm設定 點選左上角的file settings file watchers 在彈窗的視窗的右上角點選綠色的 號,然後選擇scss arguments 配置編譯後的檔案的輸出路徑 四種編譯後css樣式 這裡有一段scss 巢狀輸...

前端學習之路之自適應設計 sass語法

1.css畫素 裝置畫素 邏輯畫素 裝置畫素比 大家可以先看這篇文章了解一下基本概念。邏輯畫素 其它就是css畫素,他們其實是同一回事。裝置畫素比 css畫素與物理畫素的乙個比值。裝置畫素 手機上畫素的點,通常乙個畫素點就是一點,但從蘋果出了retina屏 幕後,如果畫素比為2,代表乙個邏輯畫素表示...