1. 程式人生 > >gulp-sass設定不同樣式風格的輸出方法

gulp-sass設定不同樣式風格的輸出方法

sass最終輸出的樣式包括下面幾種樣式風格:
巢狀輸出方式 nested
展開輸出方式 expanded 
緊湊輸出方式 compact 
壓縮輸出方式 compressed

sass:

123456789101112131415nav {ul {margin0;padding0;list-stylenone;}li { display: inline-block; }a {displayblock;padding6px 12px;text-decorationnone;}}

設定為展開輸出方式nested(預設輸出):

12345678var gulp = require('gulp');
var sass = require('gulp-sass');gulp.task('sass', function () {return gulp.src('./sass/**/*.scss').pipe(sass({outputStyle: 'nested'}).on('error', sass.logError)).pipe(gulp.dest('./css'));});

編譯出來的css樣式風格預設為巢狀輸出:

12345678910nav ul {margin0;padding0;list-stylenone; }nav li {display: inline-block; }nav a {
displayblock;padding6px 12px;text-decorationnone; }

設定為展開輸出方式expanded:

12345gulp.task('sass', function () {return gulp.src('./sass/**/*.scss').pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError)).pipe(gulp.dest('./css'));});

輸出樣式風格為:

123456

相關推薦

gulp-sass設定不同樣式風格輸出方法

sass最終輸出的樣式包括下面幾種樣式風格:巢狀輸出方式 nested展開輸出方式 expanded 緊湊輸出方式 compact 壓縮輸出方式 compressedsass:123456789101112131415nav {ul {margin: 0;padding: 0

Go web開發判斷table裡元素的大小,並根據資料正負或大小設定不同樣式

問題描述: 比如新浪財經美股行情中心,漲跌額和漲跌幅,正數顯示紅色,負數顯示綠色 在用Go語言開發時,如何實現這樣的效果? 第一種方法:不使用js Go語言內建了一些進行模板渲染的函式,在官方原始碼/src/text/template/funcs.go中,專門用於GoWeb模板

織夢判斷縮圖是否為空輸出不同樣式

有時候我們在模板中對文章有縮圖的就顯示縮圖,沒有縮圖就換個樣式,不讓它顯示為"暫無縮圖"。 簡單的單獨的縮圖 {dede:field.litpic runphp=yes} if(@me == '/images/defaultpic.gif')@me = "";else @me = "<div cla

織夢判斷縮略圖是否為空輸出不同樣式

code 不讓 name 織夢 不同樣式 field load else 是否 有時候我們在模板中對文章有縮略圖的就顯示縮略圖,沒有縮略圖就換個樣式,不讓它顯示為"暫無縮略圖"。 簡單的單獨的縮略圖 {dede:field.litpic runphp=yes} if(@me

React Native 中為IOS和Android設定不同的Style樣式,一套程式碼解決雙端顯示

React Native 開發中,大多數的元件都是IOS和Android通用的,包括大量的功能性程式碼,至少有80%以上的程式碼可以複用,而剩下的一些元件樣式/少量的程式碼會需要區分雙端,但是為了這少量的程式碼把IOS和Android完全區分這明顯不合適,程式碼複用性下降,程式碼維護量上升

用css3選擇器給你要的第幾個元素新增不同樣式方法

很多時候,我們寫網頁樣式時候會遇到如下面圖這種的, 第4個li下面有一行虛線什麼的,這樣迴圈,那麼,如何很方便的用css實現呢! 我們寫的html程式碼 例項如下: <ul class="list"> <li><a href="#"&

如何利用CSS給同一個網頁中的超連結設定設定不同樣式

用css中的類。比如<style type="text/css"> a.topcs:link { font-size: 12px; color: #000000; text-decoration: none; } a.topcs:visited { font-size: 12px; color:

Volist奇數偶數資料不同樣式輸出

<volist name='list1' id='vo' key="k"> <div class="row kuai"> <if

Android實戰技巧:用TextView實現Rich Text---在同一個TextView中設定不同的字型風格

背景介紹 在開發應用過程中經常會遇到顯示一些不同的字型風格的資訊猶如預設的LockScreen上面的時間和充電資訊。對於類似的情況,可能第一反應就是用不同的多個TextView來實現,對於每個TextView設定不同的字型風格以滿足需求。 這裡推薦的做法是使用android

jqgrid setCell 根據單元格 值的不同 設定不同樣式 屬性

gridComplete: function () {            var ids = $("#grid-table").getDataIDs();         &nbs

HTML5_canvas(設定畫筆樣式、左右跑動的小塊、繪製路徑的方法、寫字板、繪製圓形的方法、吃豆豆、繪製文字、環形進度條)設定一個模板

1、canvas(相當於畫圖板) 這句話是必須寫的 在版本高的瀏覽器中支援就不會顯示出來,版本低的就會顯示出 —->寬高樣式直接在裡面寫;(預設寬度300,高度150)  設定畫筆樣式

Vue2.0設定全域性樣式(less/sass和css)

為Vue設定全域性樣式需要幾個步驟(如果是sass將less改成sass即可) 第一:在src目錄下的main.js,也就是入口檔案裡面新增下面程式碼 require('!style-loader!css-loader!less-loader!./commo

TextView程式碼動態實現字型不同大小樣式風格顏色

看到一篇文章,在程式碼中動態實現TextView不同的顯示樣式風格顏色,感覺以後可能用的到,做個記錄,方便以後使用。 首先是效果圖: 程式碼動態實現了同一個TextView控制元件,不同位置字型的不同顯示風格和效果。 一、 MainActivity程式碼: import

ueditor更改工具欄按鈕,設定css樣式,第二次無法正常載入的解決方法

今天專案上要用到ueditor,我在使用中遇到了一些問題,最後解決。 在WebContent目錄新建資料夾ueditor1_4_3,右鍵資料夾import->File System->Next->Browse->選擇你下載的ueditor整個目錄

設定plot的風格樣式(二)

import matplotlib.pyplot as plt import numpy as np '''plot語句中支援除X,Y以外的引數,以字串形式存在,來控制顏色、線性、點型等要素,語法形式如下: plt.plot(X,Y,"format",...

npm安裝gulp-sass失敗處理辦法

fun 安裝完成 nod flag target .... 命令 項目 解決 最近在做一個基於gulp的前端自動化的項目,在github上拉取代碼後,按照正常的流程,首先我們要 npm install ,在安裝的過程中,一直提示我gulp-sass 安裝

HTML引入CSS樣式三種方法及優先級 CSS樣式的寫法

分開 通過 str 相同 gif 標記 sof 偽類 cnblogs HTML引入CSS樣式三種方法及優先級: 方法 css的樣式引用由3種方式。分別為行內樣式、內部樣式(嵌入式)和外部樣式; 行內樣式: 在對象的標記內使用對象的s

Python 冒泡排序只適用位數相同,位數不同用a.sort()方法

ever 調用 () 降序排序 spa class nbsp Coding odi 數組內容雙位數排序: #coding:utf-8 print u"中文" a = [‘15‘,‘11‘,‘33‘,‘52‘,‘61‘,‘43‘] b = 0 c = 0 print a i

vue的挖坑和爬坑之css背景圖樣式終極解決方法

link tro round 源文件 nbsp -i css樣式 -h pat 原問題 #wrapper{ width:100%; height:100%; position:fixed;

riot.js教程【二】組件撰寫準則、預處理器、標簽樣式和裝配方法

def coffee 將在 tom enter 名稱 spa 配方法 undefined 基本要求 一個riot標簽,就是展現和邏輯的組合(也就是html和JS); 以下是編寫riot標簽最基本的規則: 先撰寫HTML,再撰寫JS,JS代碼可以寫在<script