前端sass預編譯怎麼使用

㈠ css預編譯器： Sass 和 Less的實現和通過編譯css的js文件，然後通過引用js的方法實現css編譯的原理有區別

先說問題，css預編譯器，前端都必須要使用嗎？當然是非必需的，如果是小的項目沒必要使用，但是項目大了之後css預編譯器的優勢才會凸顯出來，配合postcss整個項目的css文件會有極大的壓縮

㈡ 在STS中能否使用gulp和sass預編譯

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
其中，gulp.dest這句就是編譯sass為css到指定的路徑上。

㈢ 0基礎學習前端，需要掌握什麼

對於零基礎想要學習web前端的小夥伴來說，不知道從哪學起，也不知道該掌握哪些知識，這里蝸牛學院就給大家整理了一份系統全面的web前端學習路線，希望可以給想要學習web前端的小夥伴帶來一些幫助。

第一階段：專業核心基礎

階段目標：

1. 熟練掌握HTML5、CSS3、Less、Sass、響應書布局、移動端開發。

2. 熟練運用HTML+CSS特性完成頁面布局。

4. 熟練應用CSS3技術，動畫、彈性盒模型設計。

5. 熟練完成移動端頁面的設計。

6. 熟練運用所學知識仿製任意Web網站。

7. 能綜合運用所學知識完成網頁設計實戰。

知識點：

1、Web前端開發環境，HTML常用標簽，表單元素，Table布局，CSS樣式表，DIV+CSS布局。熟練運用HTML和CSS樣式屬性完成頁面的布局和美化，能夠仿製任意網站的前端頁面實現。

2、CSS3選擇器、偽類、過渡、變換、動畫、字體圖標、彈性盒模型、響應式布局、移動端。熟練運用CSS3來開發網頁、熟練開發移動端，整理網頁開發技巧。

3、預編譯css技術：less、sass基礎知識、以及插件的運用、BootStrap源碼分析。能夠熟練使用 less、sass完成項目開發，深入了解BootStrap。

4、使用HTML、CSS、LESS、SASS等技術完成網頁項目實戰。通過項目掌握第一階段html、css的內容、完成PC端頁面設計和移動端頁面設計。

第二階段：Web後台技術

階段目標:

1. 了解javaScript的發展歷史、掌握Node環境搭建及npm使用。

2. 熟練掌握JavaScript的基本數據類型和變數的概念。

3. 熟練掌握JavaScript中的運算符使用。

4. 深入理解分之結構語句和循環語句。

5. 熟練使用數組來完成各種練習。

6.熟悉es6的語法、熟練掌握JavaScript面向對象編程。

7.DOM和BOM實戰練習和H5新特性和協議的學習。

知識點：

1、軟體開發流程、演算法、變數、數據類型、分之語句、循環語句、數組和函數。熟練運用JavaScript的知識完成各種練習。

2、JavaScript面向對象基礎、異常處理機制、常見對象api，js的兼容性、ES6新特性。熟練掌握JavaScript面向對象的開發以及掌握es6中的重要內容。

3、BOM操作和DOM操作。熟練使用BOM的各種對象、熟練操作DOM的對象。

4、h5相關api、canvas、ajax、數據模擬、touch事件、mockjs。熟練使用所學知識來完成網站項目開發。

第三階段：資料庫和框架實戰

階段目標：

1. 綜合運用Web前端技術進行頁面布局與美化。

2. 綜合運用Web前端開發框架進行Web系統開發。

3. 熟練掌握Mysql、Mongodb資料庫的發開。

4. 熟練掌握vue.js、webpack、elementui等前端框技術。

5. 熟練運用Node.js開發後台應用程序。

6. 對Restful，Ajax，JSON，開發過程有深入的理解,掌握git的基本技能。

知識點：

1、資料庫知識，範式，MySQL配置，命令，建庫建表，數據的增刪改查，mongodb資料庫。深入理解資料庫管理系統通用知識及MySQL資料庫的使用與管理，為Node.js後台開發打下堅實基礎。

2、模塊系統，函數，路由，全局對象，文件系統，請求處理，Web模塊，Express框架，MySQL資料庫處理，RestfulAPI，文件上傳等。熟練運用Node.js運行環境和後台開發框架完成Web系統的後台開發。

3、vue的組件、生命周期、路由、組件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能夠運用Vue.js完成基礎前端開發、熟練運用Vue.js框架的高級功能完成Web前端開發和組件開發，對MVVM模式有深刻理解。

4、需求分析，資料庫設計，後台開發，使用vue、node完成pc和移動端整站開發。於Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，實現整站項目完整功能並上線發布。

第四階段：移動端和微信實戰

階段目標：

1.熟練掌握React.js框架，熟練使用React.js完成開發。

2.掌握移動端開發原理，理解原生開發和混合開發。

3.熟練使用react-native和Flutter框架完成移動端開發。

4.掌握微信小程序以及了解支付寶小程序的開發。

5.完成大型電商項目開發。

知識點：

1、React面向組件編程、表單數據、組件通信、監聽、聲明周期、路由、Rex基本概念。練使用react完成項目開發、掌握Rex中的非同步解決方案Saga。

2、react-native、開發工具、視圖與渲染、api操作、Flutter環境搭建、路由、ListView組件、網路請求、打包。練掌握react-native和Flutter框架，並分別使用react-native和Flutter分別能開發移動端項目。

3、微信小程序基本介紹、開發工具、視圖與渲染、api操作、支付寶小程序的入門和api學習。掌握微信小程序開發了解支付寶小程序。

4、大型購物網站實戰，整個項目前後端分離開發；整個項目分為四部分：PC端網頁、移動端APP、小程序、後台管理。團隊協作開發，使用git進行版本控制。目期間可以擴展Three.js 、TypeScript。

㈣ web前端開發需要用到哪些知識

應該熟練掌握的基礎技能：

• HTML4，HTML5語法、標簽、語義

• CSS2.1，CSS3規范，與HTML結合實現各種布局、效果

• Ecma-262定義的javascript的語言核心，原生客戶端javascript，DOM操作，HTML5新增功能

• 一個成熟的客戶端javascript庫，推薦jquery

• 一門伺服器端語言：如果有伺服器端開發經驗，使用已經會的語言即可，如果沒有伺服器端開發經驗，熟悉Java可以選擇Servlet，不熟悉的可以選PHP，能實現簡單登陸注冊功能就足夠支持前端開發了，後續可能需要繼續學習，最基本要求是實現簡單的功能模擬，

• HTTP

在掌握以上基礎技能之後，工作中遇到需要的技術也能快速學習。

基本開發工具

恰當的工具能有效提高學習效率，將重點放在知識本身，在出現問題時能快速定位並
解決問題，以下是個人覺得必備的前端開發工具：

• 文本編輯器：推薦Sublime Text，支持各種插件、主題、設置，使用方便

• 瀏覽器：推薦Google Chrome，更新快，對前端各種標准提供了非常好的支持

• 調試工具：推薦Chrome自帶的Chrome develop tools，可以輕松查看DOM結構、樣式，通過控制台輸出調試信息，調試javascript，查看網路等

• 輔助工具：PhotoShop編輯圖片、取色，fireworks量尺寸，AlloyDesigner對比尺寸，以及前面的到的Chrome develop tools，

• FQ工具：lantern, 壁虎漫步

學習方法和學習目標

方法：

• 入門階段反復閱讀經典書籍的中文版，書籍中的每一個例子都動手實現並在瀏覽器中查看效果

• 在具備一定基礎之後可以上網搜各種教程、demo，了解各種功能的實際用法和常見功能的實現方法

• 閱讀HTML，CSS，Javascript標准全面完善知識點

• 閱讀前端牛人的博客、文章提升對知識的理解

• 善用搜索引擎

目標：

• 熟記前面知識點部分的重要概念，結合學習經歷得到自己的理解

• 熟悉常見功能的實現方法，如常見CSS布局，Tab控制項等。

入門之路

以下是入門階段不錯的書籍和資料

• HTML先看《HTML & CSS: Design and Build Websites》1-9章，然後《HTML5: The Missing Manual》1-4章。

• CSS先看《CSS: The Missing Manual》，然後《CSS權威指南》

• javascript先看《javascript高級程序設計》，然後《javascript權威指南》

• HTTP看HTTP權威指南

• 在整個學習過程中HTML CSS JavaScript會有很多地方需要互相結合，實際工作中也是這樣，一個簡單的功能模塊都需要三者結合才能實現。

• 動手是學習的重要組成部分，書籍重點講解知識點，例子可能不是很充足，這就需要利用搜索引擎尋找一些簡單教程，照著教程實現功能。以下是一些比較好的教程網址

• 可以搜索各大公司前端校招筆試面試題作為練習題或者他人總結的前端面試題還有個人總結的面試題（帶參考答案）

• http://code.tutsplus.com有各種各樣的教程

• MDN也有很多教程，更重要的是裡面有詳細的文檔，需要查找某個功能時在Google搜索：xxx site:https://developer.mozilla.org

• http://www.html5rocks.com/zh/也有很多優質教程

• http://www.sitepoint.com/

• http://alistapart.com/

• 原生javascript是需要重點掌握的技能，在掌握原生javascript的基礎上推薦熟練掌握jQuery，在實際工作中用處很大，這方面的書籍有《Learning jQuery》或者去jQuery官網

• 建一個https://github.com/賬號，保存平時學習中的各種代碼和項目。

• 有了一定基礎之後可以搭建一個個人博客，記錄學習過程中遇到的問題和解決方法，方便自己查閱也為其他人提供了幫助。也可以去http://www.cnblogs.com/或者http://www.csdn.net/這樣的網站注冊賬號，方便實用

• 經常實用Google搜索英文資料應該經常找到來自http://stackoverflow.com/的高質量答案，與到問題可以直接在這里搜索，如果有精力，注冊一個賬號為別人解答問題也能極大提高個人能力。

• 經典書籍熟讀之後，可以打開前面必備基礎技能部分的鏈接。認真讀對應標准，全面掌握知識

繼續提高

有了前面的基礎之後，前端基本算是入門了，這時候可能每個人心中都有了一些學習方向，如果還是沒有。
可以參考前面必備技能部分提到的那兩個項目，從裡面選一些進行發展學習。以下是一些不錯的方面：

• Grunt：前端自動化工具，提高工作效率

• less css：優秀的CSS預處理器

• bootstrap：優秀的CSS框架，對沒有設計師的團隊很不錯，與less結合使用效果完美

• requirejs：AMD規范的模塊載入器，前端模塊化趨勢的必備工具

• Node.js：JavaScript也可以做後台，前端工程師地位更上一步

• AngularJS：做Single Page Application的好工具

• 移動端web開發：智能手機的普及讓移動端的流量正在逐步趕超PC端

• Javascript內存管理：SPA長期運行需要注意內存泄露的問題

• High Performance JavaScript(Build Faster Web Application Interfaces)

• Best Practices for Speeding Up Your Web Site：重要技能

####工具

• chrome dev tools：前端開發調試利器，著重注意幾個功能：

• liveload: 修改頁面後自動刷新，不用按F5

• dimensions：直接在頁面上測量的利器

• livestyle：css樣式修改後自動起效果，不需要刷新，elements修改後也能同步到代碼中

• image tool：測量，取色

• UC二維碼：移動端調試掃碼必備

• pagespeed，YSlow：頁面性能分析和優化插件

• 馬克飛象：優秀的在線markdown編輯器，快速寫周報，做記錄

• watch expression：通過表達式查看當前內存中的值

• call stack：查看調用棧，開啟async，可以看非同步調用棧（這個非常有用，尤其是ajax調試的時候）

• scope variables：作用域鏈上的變數，非常有用

• console（廢話）

• elements:元素樣式調整，很常用

• sources：代碼中添加斷點，單步調試，以及單步調試過程中查看內存中的對象

• network：抓包查看每個請求，非常重要，前後端聯調必備

• timeline：分析渲染、js執行等等各個階段，性能優化利器

• emulation：模擬移動端環境，mobile頁面開發必備

• 一些插件:

• sublime text2：編碼方便，插件多，速度快，性能好

• emmet：提升html編碼速度必備

• sublimelinter + 各種語言的lint和hint：代碼糾錯

• 一些snippets：自動補全，提升開發效率

• Intellij IDEA和WebStorm：集成開發環境，集成了各種功能，開發比sublime要方便，但會比較吃性能

• Mark Men：測量、取色、標注利器，拿到視覺稿之後第一個打開的軟體

• GFW Fucker：我用紅杏，可以的話買個虛擬伺服器當梯子

• iHosts：非常優秀的hosts管理軟體，輕松修改hosts，開發調試必備

• Charles：Mac 平台最好用的抓包分析工具

• Rythem：AlloyTeam出品的代理抓包軟體，非常輕量，安裝簡單，移動端（真機）開發調試很好用

• Wunderlist：一個非常不錯的Todo List，任務、需求多的時候管理起來很方便

####技能
前端的技能其實除了JavaScript（包括NodeJS）、HTML、CSS以外，還有很多。其實前端的技能樹很大，這里只能列一些我開發中見到的說一說
#####語言基礎
JavaScript：

• 作用域鏈、閉包、運行時上下文、this

• 原型鏈、繼承

• NodeJS基礎和常用API

CSS：

• 選擇器

• 瀏覽器兼容性及常見的hack處理

• CSS布局的方式和原理（盒子模型、BFC、IFC等等）

• CSS 3，如animation、gradient、等等

HTML：

• 語義化標簽

#####進階
JavaScript:

• 非同步控制（Promise、ES6 generator、Async）

• 模塊化的開發方式（AMD、CMD、KMD等等）

• JavaScript解釋器的一些相關知識

• 非同步IO實現

• 垃圾回收

• 事件隊列

• 常用框架使用及其原理

• jQuery：基於選擇器的框架，但個人認為不能叫框架，應該算工具庫，因為不具備模塊載入機制，其中源碼很適合閱讀鑽研

• AngularJS/Avalon等MVVM框架：著重理解MVVM模式本身的理念和雙向綁定的實現，如何解耦

• underscore：優秀的工具庫，方便的理解常用工具代碼片段的實現

• polymer/React: 組件化開發，面向未來，理解組件化開發的原理

CSS和HTML：主要是CSS3的特性和HTML5的特性，以及瀏覽器處理的流程和繪制原理

• DOM樹、CSSOM樹、渲染樹的構建流程及頁面渲染的過程

• 解析HTML、CSS、JavaScript時造成的阻塞

• HTML5相關

• SVG及矢量圖原理

• Canvas開發及動畫原理（幀動畫）

• Video和Audio

• flex box布局方式

• icon fonts的使用

常用NodeJs的package：

• koa

• express

• underscore

• async

• gulp

• grunt

• connect

• request

一些理念：

• 響應式Web

• 優雅降級、漸進增強

• dont make me think

• 網頁可用性、可訪問性、其中的意義

• SEO搜索引擎優化，了解搜索引擎的原理

• SPA的好處和問題

性能優化：

• 減少請求數量（sprite、combo）

• 善用緩存（application cache、http緩存、CDN、localstorage、sessionstorage，備忘錄模式）

• 減少選擇器消耗（從右到左），減少DOM操作（DOM和JavaScript解釋器的分離）

• CSS的迴流與重繪

• 生態系統

• npm

• bower

• spm

• 搭建一個屬於自己的博客

• git pages

• hexo

• jekyll

#####未來

• Web Componets：面向未來的組件化開發方式

• HTML模板

• Shadow DOM

• Custom Elements

• HTML Import

• 移動端Native開發：這也是需要了解的，以後前端工程師會經常地和webview打交道，也要了解native開發

㈤ 如何安裝並編譯sass為css文件

1、koala軟體編譯
2、sass命令：依靠環境。
自動編譯命令：（編譯單個文件/編譯整個文件夾）
編譯單個文件
sass文件目錄 sass --watch scss文件的路徑:css文件的路徑 --style expanded
編譯整個文件夾
sass文件目錄 sass --watch scss文件夾/. : css文件夾/. --style expanded
3、gulp編譯
4、hbulid編譯
①工具--預編譯設置
②新建一個預編譯配置 .scss
③輸入觸發命令的地址：ruby裡面的sass.bat地址
④命令參數：%FileName% ../css/%FileBaseName%.css

㈥ Less和Sass這兩個怎麼使用

項目足夠大，起碼幾十張頁面，有公共的UI組件，組件或者頁面上有相似的拼裝屬性的方法(可以寫成mixin)，組件或者樣式拼裝上存在繼承關系，或者有theme的需求。其實本身純粹的CSS編寫也有很多現成的方法論(OOCSS,SMACSS,BEM,DRYCSS)實現復雜度的管理，但是預編譯器可以提供一些語法糖簡化(包括你可以使用PostCSS)，同時遷移編程的經驗更好管理復雜度。其實就是習慣和效率的問題，工具是為了提高效率存在的，如果不習慣，大家有統一規范的共識，用純粹CSS也能寫出組織良好的CSS。

㈦ 前端開發中什麼情況下用less或者sass

前端開發用less或者sass的情況如下：
項目足夠大，起碼幾十張頁面，有公共的UI組件，組件或者頁面上有相似的拼裝屬性的方法(可以寫成mixin)，組件或者樣式拼裝上存在繼承關系，或者有theme的需求。
其實本身純粹的CSS編寫也有很多現成的方法論(OOCSS,SMACSS,BEM,DRYCSS)實現復雜度的管理，但是預編譯器可以提供一些語法糖簡化(包括你可以使用PostCSS)，同時遷移編程的經驗更好管理復雜度。其實就是習慣和效率的問題，工具是為了提高效率存在的，如果不習慣，大家有統一規范的共識，用純粹CSS也能寫出組織良好的CSS。

㈧ scss基礎

scss是sass3引入的新的語法，是sassy css的簡寫；簡單說就是scss就是sass的升級版，其語法完全兼容css3，並且繼承了sass的強大的功能；

scss是sass的升級版，兩者其實就是一種東西，我們平時都稱之為sass，兩者的不同之處主要有以下兩點：

http://compass-style.org/
compass是sass預編譯語言的工具庫
在sass的基礎上封裝了一系列有用的模塊與模板，補充了sass的功能；

npm i sass -g 全局安裝sass

Partials條件與特點：

㈨ 零基礎學習前端開發要怎麼開始

這里整理了一份web前端學習路線的思維導圖，需要掌握和學習的內容如下：

第一階段：專業核心基礎

階段目標：

1. 熟練掌握HTML5、CSS3、Less、Sass、響應書布局、移動端開發。

2. 熟練運用HTML+CSS特性完成頁面布局。

4. 熟練應用CSS3技術，動畫、彈性盒模型設計。

5. 熟練完成移動端頁面的設計。

6. 熟練運用所學知識仿製任意Web網站。

7. 能綜合運用所學知識完成網頁設計實戰。

知識點：

1、Web前端開發環境，HTML常用標簽，表單元素，Table布局，CSS樣式表，DIV+CSS布局。熟練運用HTML和CSS樣式屬性完成頁面的布局和美化，能夠仿製任意網站的前端頁面實現。

2、CSS3選擇器、偽類、過渡、變換、動畫、字體圖標、彈性盒模型、響應式布局、移動端。熟練運用CSS3來開發網頁、熟練開發移動端，整理網頁開發技巧。

3、預編譯css技術：less、sass基礎知識、以及插件的運用、BootStrap源碼分析。能夠熟練使用 less、sass完成項目開發，深入了解BootStrap。

4、使用HTML、CSS、LESS、SASS等技術完成網頁項目實戰。通過項目掌握第一階段html、css的內容、完成PC端頁面設計和移動端頁面設計。

第二階段：Web後台技術

階段目標:

1. 了解JavaScript的發展歷史、掌握Node環境搭建及npm使用。

2. 熟練掌握JavaScript的基本數據類型和變數的概念。

3. 熟練掌握JavaScript中的運算符使用。

4. 深入理解分支結構語句和循環語句。

5. 熟練使用數組來完成各種練習。

6.熟悉es6的語法、熟練掌握JavaScript面向對象編程。

7.DOM和BOM實戰練習和H5新特性和協議的學習。

知識點：

1、軟體開發流程、演算法、變數、數據類型、分之語句、循環語句、數組和函數。熟練運用JavaScript的知識完成各種練習。

2、JavaScript面向對象基礎、異常處理機制、常見對象api，js的兼容性、ES6新特性。熟練掌握JavaScript面向對象的開發以及掌握es6中的重要內容。

3、BOM操作和DOM操作。熟練使用BOM的各種對象、熟練操作DOM的對象。

4、h5相關api、canvas、ajax、數據模擬、touch事件、mockjs。熟練使用所學知識來完成網站項目開發。

第三階段：資料庫和框架實戰

階段目標：

1. 綜合運用Web前端技術進行頁面布局與美化。

2. 綜合運用Web前端開發框架進行Web系統開發。

3. 熟練掌握Mysql、Mongodb資料庫的發開。

4. 熟練掌握vue.js、webpack、elementui等前端框技術。

5. 熟練運用Node.js開發後台應用程序。

6. 對Restful，Ajax，JSON，開發過程有深入的理解,掌握git的基本技能。

知識點：

1、資料庫知識，範式，MySQL配置，命令，建庫建表，數據的增刪改查，mongodb資料庫。深入理解資料庫管理系統通用知識及MySQL資料庫的使用與管理，為Node.js後台開發打下堅實基礎。

2、模塊系統，函數，路由，全局對象，文件系統，請求處理，Web模塊，Express框架，MySQL資料庫處理，RestfulAPI，文件上傳等。熟練運用Node.js運行環境和後台開發框架完成Web系統的後台開發。

3、vue的組件、生命周期、路由、組件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能夠運用Vue.js完成基礎前端開發、熟練運用Vue.js框架的高級功能完成Web前端開發和組件開發，對MVVM模式有深刻理解。

4、需求分析，資料庫設計，後台開發，使用vue、node完成pc和移動端整站開發。於Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，實現整站項目完整功能並上線發布。

第四階段：移動端和微信實戰

階段目標：

1.熟練掌握React.js框架，熟練使用React.js完成開發。

2.掌握移動端開發原理，理解原生開發和混合開發。

3.熟練使用react-native和Flutter框架完成移動端開發。

4.掌握微信小程序以及了解支付寶小程序的開發。

5.完成大型電商項目開發。

知識點：

1、React面向組件編程、表單數據、組件通信、監聽、生命周期、路由、Rex基本概念。練使用react完成項目開發、掌握Rex中的非同步解決方案Saga。

2、react-native、開發工具、視圖與渲染、api操作、Flutter環境搭建、路由、ListView組件、網路請求、打包。練掌握react-native和Flutter框架，並分別使用react-native和Flutter分別能開發移動端項目。

3、微信小程序基本介紹、開發工具、視圖與渲染、api操作、支付寶小程序的入門和api學習。掌握微信小程序開發了解支付寶小程序。

4、大型購物網站實戰，整個項目前後端分離開發；整個項目分為四部分：PC端網頁、移動端APP、小程序、後台管理。團隊協作開發，使用git進行版本控制。目期間可以擴展Three.js 、TypeScript。

這已經是一套非常完備的Java學習路線了，零基礎學習Java完全自學的話還是比較吃力的，建議還是找專業的機構系統學一下，可以點 擊 頭 像 了解一下。