SASS基礎——十個常見的Mixins
從W3cplus最近的更新都可以看出我的學習新動向。是的，自從開始學習SASS之後，我喜歡上了SASS。因為他能讓我的工作效率更快，同時讓我更加節約出時間去做一些我自己喜歡的事情。
現在開始我開始使用SASS私下用在我喜歡的專案中，讓我更加的對SASS喜歡與執著。在使用過程中，SASS中的Mixins讓我覺得他的功能強大，使用方便——SASS的Mixins可以一次性定義功能模組，讓你在任何地方呼叫，並且可以無限制的重用。
Compass是一個SASS的mixins庫，裡面包括了很多有用的功能模組，比如說border-radius和box-shadow等。但很多時候，這些功能模組還無法滿足我們所有專案的需求，但是大家可以根據自己的需求定義一些功能模組。接下來主要和大家一起探討一些在實際專案中經常使用的mixins
宣告Mixins
Mixins是SASS中的一個強大的功能。使用@mixin根據功能定義一個模組，然後在需要使用的地方通過@include來呼叫宣告的mixins。其主要功能是可以讓你的程式碼簡潔高效。如果你在你的開發工作中使用了SASS，毫無疑問你正在使用一些mixin。如果你是初次接觸SASS，或者說接觸SASS一段時間，但還不知道如何定義mixins，也不用擔心，你只需要花一點點時間，仔細閱讀下面相關教程，你會對mixins有一個深入的瞭解：
常用的Mixins
經過前面的學習（或者你使用SASS很久）之後，我想對於SASS的mixins並不會太陌生，甚至說，你有使用SASS做過專案的經驗的話，你肯定有寫過不放有用的mixins，並且準備用於你手中的任何專案中，但對於一個初學SASS的初學者（像偶一樣的），對於怎麼定義一些常用的mixins還是略有難度的。接下來，我在網上參考了不少例項，整理了一些自認為常用而用功能強大的mixins，希望這些mixins對於初學者對SASS有一個更理性的認知，當然更希望大家能通過這裡的一些mixins獲得更好的靈感，製作出更有意義的mixins。
inline-block
inline-block在CSS中經常會有碰到，比如說我們需要製作一個水平排列的表單，其中 label
input[type="text"]、input[type="checkbox"]等）垂直居中對齊，我們常用的就是給他們加上下面的樣式：
label,
input {
display: inline-block;
vertical-align: middle;
*display:inline;
*zoom: 1;
*vertical-align: auto;
}
在SASS中，我們可以定義一個inline-block()：
$inline-block-alignment: middle !default;//設定一個預設的對齊方式
// 提供一個跨瀏覽器的方法來實現`display:inline-block`
@mixin inline-block($alignment: $inline-block-alignment) {
display: inline-block;
@if $alignment and $alignment != none {
vertical-align: $alignment;
}
@if $legacy-support-for-ie {
*vertical-align: auto;
zoom: 1;
*display: inline;
}
}
在這個inline-block的mixin中，定義了一個引數$alignment，並且給其傳了一個引數$inline-block-alignment。
當設定$inline-block-alignment為none或者false時，inline-block的Mixins中禁止輸出vertical-align的屬性值；當然我們可以通過設定$alignment的值來修改vertical-align的預設值。
眾所周知，display:inline-block在IE低版本的瀏覽器中存在一定的問題，如果我們需要實現一個相容IE低版本的inline-block效果，我們就得考慮在這個mixin中設定一個開關，當我需要相容的時候開啟，否則我就關閉。出天這個原因，我們在這個mixins中使用:
@if $legacy-support-for-ie {
*display: inline;
zoom: 1;
*vertical-align: auto;
}
注：這裡的*vertical-align:auto並不是用來處理相容inline-block所需的程式碼，而是用來相容vertical-align屬性的。
inline-block的mixin定義好了，或許大家會關心如何呼叫，這個很簡單，我們來看一個簡單的例子：
//SCSS
$legacy-support-for-ie: true !default;
label,
input {
@include inline-block();
}
//CSS
label,
input {
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
}
這裡我們就只是簡單的通過@include呼叫了剛才宣告的inline-block。這個時候你可能會想，我已經不理IE很久了，而且我也不想輸出vertical-align。實際上這些並不是難度，剛才我們在定義inline-block也說明了，只要$inline-block-alignment值為none或者flase就不會輸出。至於在IE下不輸出相容程式碼，那就更簡單的了，只需要設定$legacy-support-for-ie為false就OK了，如：
//SCSS
$legacy-support-for-ie: false !default;
label,
input {
@include inline-block(none);
}
//CSS
label,
input {
display: inline-block;
}
此時如果你想讓元素頂部對奇，那也不是一件難事：
//SCSS
$legacy-support-for-ie: false !default;
label,
input {
@include inline-block(top);
}
//CSS
label,
input {
display: inline-block;
vertical-align: top;
}
水平居中
元素水平居中實現方法很多種（《六種實現元素水平居中》一文中介紹了六種不同方法），但我們最常用的還是給一個元素設定一個具體的寬度（設定min-width或max-width也行，但在IE下需要另行考慮），配合margin-left和margin-right的值為auto實現水平居中：
@mixin horizontal-center {
margin-left: auto;
margin-right: auto;
}
這個時候，只需要在有寬度的元素中呼叫horizontal-center，就能讓一個元素實現水平居中：
//SCSS
$width: 960px !default;
.container {
width: $width;
@include horizontal-center;
}
//CSS
.container {
width: 960px;
margin-left: auto;
margin-right: auto;
}
這個horizontal-center沒有設定任何引數，通過前面的基礎知識，我們可以得知mixin只會複製程式碼，並不會進行程式碼合併，為了讓樣式中相同程式碼合併，我們可以通過%placeholders來實現。換句話說，在定義的horizontal-center基礎上，我們可以配合%來進行二次宣告：
%horizontal-center {
@include horizontal-center;
}
接下來可以通過@extend來配合使用：
//SCSS
$width: 960px !default;
.container {
width: $width;
@extend %horizontal-center;
}
//CSS
.container {
margin-left: auto;
margin-right: auto;
}
.container {
width: 960px;
}
%horizontal-center和@mixin
horizontal-center所起的功能是一樣的，都是用來實現元素水平居中，其最大的區別是，前者適合使用在多個元素之上，後者適合使用在單個元素之上。這樣說或許有點迷糊，我們來舉個栗子：
假設在樣式中，我有.container和.menu兩個元素，他們寬度不一致，但都希望實現水平居中，那麼這個時候我們就可以使用%horizontal-center，因為這樣，我們可以將居中這部分程式碼合併在一起：
//SCSS
$width: 960px !default;
.container {
width: $width;
@extend %horizontal-center;
}
.menu {
width: $width / 2;
@extend %horizontal-center;
}
//CSS
.container, .menu {
margin-left: auto;
margin-right: auto;
}
.container {
width: 960px;
}
.menu {
width: 480px;
}
從編譯出來的CSS程式碼中很明顯的可以發現：.container和.menu有關於居中程式碼合併在一起：
.container, .menu {
margin-left: auto;
margin-right: auto;
}
對於@mixin horizontal-center比較適合在一個元素實現水平居中的時候使用。如果在樣式之中僅有一個元素要水平居中，也使用%horizontal-center的話，會讓你失望的：
//SCSS
$width: 960px !default;
.container {
width: $width;
@extend %horizontal-center;
}
//CSS
.container {
margin-left: auto;
margin-right: auto;
}
.container {
width: 960px;
}
從例項中明顯的可以看出，原本在.container中一次效能完成的事情，但使用%horizontal-center卻將樣式拆分成兩個部分。這種並不是大家想要的，或者說希望看到的。出於這個情況之下，我們還是使用@mixin
horizontal-center會完美一些：
//SCSS
$width: 960px !default;
.container {
width: $width;
@include horizontal-center;
}
//CSS
.container {
width: 960px;
margin-left: auto;
margin-right: auto;
}
浮動與重置浮動
在CSS中，浮動常用來實現佈局效果，當然很多時候也使用浮動來完成文字圍繞圖片的效果。常見的就是左浮動、右浮動。雖然浮動功能強大，能幫助我們實現很多佈局效果，但有時候在相同的模組中，要將浮動重置掉，不得不把當前設定的浮動效果，使用none重置。對於浮動的出現頻繁率，將浮動和重置浮動列入SASS的mixins。
首先我們通過@mixin來宣告一個float：
@mixin float($side:left){
float: unquote($side);
@if $legacy-support-for-ie {
_display:inline;
}
}
由於IE6下浮動碰到同方向的margin會引起雙倍margin的Bug，為了解決這個Bug，在@mixin
float中新增一個條件判斷，如果支援IE6，就新增：
@if $legacy-support-for-ie {
_display:inline;
}
對於float我們只需要宣告這個就能使用了，但為了讓你的程式碼更具語義化，可以在此基礎上增加一個pull-left為左浮動和pull-right為右浮動：
//左浮動
@mixin pull-left{
@include float(left);
}
%pull-left {
@include float(left);
}
//右浮動
@mixin pull-right{
@include float(right);
}
%pull-right {
@include float(right);
}
如此一來，我們可以輕鬆的通過@include或者@extend來呼叫定義好的pull-left或者pull-right：
//SCSS
.col{
@extend %pull-left;
}
.aside {
@include pull-right;
}
//CSS
.col {
float: left;
_display: inline;
}
.aside {
float: right;
_display: inline;
}
浮動讓你既愛又恨，在實際需求之中難免需要重置掉已設定的了浮動的功能，並且重置display。那麼接下來定義的reset-float就可以輕鬆幫你完成你要的功能：
@mixin reset-float($display:block){
float: none;
display: $display;
}
此處傳了一個引數$display給reset-float。他可以幫你在重置float的時候，重置display屬性，預設情況下，@include
reset-float出來display:block，但你可以顯式的傳一個值給他，從而重置display屬性：
//SCSS
.content {
@include reset-float(inline);
}
//CSS
.content {
float: none;
display: inline;
}
清除浮動clearfix
有浮動就有清除浮動，在CSS中清除浮動的方法有很多種，在這裡主要來看最常用的clearfix清除浮動方法。同樣先建立一個clearfix:
@mixin clearfix {
@if $legacy-support-for-ie {
*zoom: 1;
}
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
overflow: hidden;
}
}
%clearfix {
@include clearfix;
}
同樣為了相容IE低版本瀏覽器，裡面添加了@if $legacy-support-for-ie開關，如果其值為true就開啟，如果其值為false就關閉，這個和前面介紹的是一樣功能。
建立好clearfix後，直接在你需要的地方通過@extend和@include方法呼叫（對於他們的區別，此處不在闡述）：
//SCSS
.container {
@extend %clearfix;
}
//CSS
.container {
*zoom: 1;
}
.container:before,
.container:after {
content: "";
display: table;
}
.container:after {
clear: both;
overflow: hidden;
}
圖片替代文字
圖片替代文字，這是頁面中常用的效果，平時解決方法，就是在需要使用圖片替代文字的地方，新增一個類名。這種方法雖然能解決問題，但維護真心的蛋疼，小生深有感受呀。然而我們在SASS的Mixin中定義一個 ir（Image
replacement），將功能都寫成一個模組，需要的時候呼叫，省得不停的新增和刪除類名。
《十種圖片替換文字CSS方法》這裡羅列了十多種圖片替換文字的方法，我們就不糾結使用拿一種了，找了最新發現的一種（來自於H5bp）:
@mixin ir {
background-color: transparent;
border: 0;
overflow: hidden;
@if $legacy-support-for-ie {
*text-indent: -150%;
}
&:before {
content: "";
display: block;
width: 0;
height: 150%;
}
}
%ir {
@include ir;
}
這是來自於H5bp中的一種圖片替換文字方法，但沒有測試ie低版本，現代瀏覽測試是OK的，如果大家覺得這種方法對相容性不可靠，可以換過一些常用的，可靠的版本。
在實際使用中要讓圖片替換文字成功，我們還需要在對應的地方加入一些基本的樣式。或許你會問，為什麼不一起加入呢？因為針對不同的元素，在這裡統一加，有點浪費，所以使用時可以根據元素自身進行載入：
//SCSS
#logo {
display: block;
width: 100px;
height: 100px;
@include ir;
}
//CSS
#logo {
display: block;
width: 100px;
height: 100px;
background-color: transparent;
border: 0;
overflow: hidden;
*text-indent: -150%;
}
#logo:before {
content: "";
display: block;
width: 0;
height: 150%;
}
隱藏元素
最常用來隱藏一個元素的方法是使用display:none，可這並不是一個完美的方法，這樣會讓螢幕閱讀器無法讀到這個元素。為了解決這個問題，使用另外一種方法來實現元素的隱藏，而這種方法僅在瀏覽器中隱藏了元素，而螢幕閱讀器卻能讀到這個元素。
//1.瀏覽器和螢幕閱讀器都隱藏元素
@mixin hidden {
display: none !important;
visibility: hidden;
}
%hidden {
@include hidden;
}
//2.僅瀏覽器隱藏，螢幕閱讀器不被隱藏
@mixin visuallyhidden {
@if $legacy-support-for-ie {
clip: rect(0,0,0,0);
}
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
////擴充套件了`.visuallyhidden`，充許`.focusable`元素通過鍵盤獲取
&.focusable:active,
&.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
}
%visuallyhidden {
@include visuallyhidden;
}
//3.隱藏元素，但佈局中佔有空間
@mixin invisible {
visibility: hidden;
}
%invisible {
@include invisible;
}
擷取文字text-overflow
擷取文字，到目前為止對於單行文字，我們可以使用text-overflow來實現。但對於多行文字的擷取，使用純CSS來實現，還是很蛋疼的。Roman在《CSS
Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS》一文中詳細介紹了使用純CSS實現多行文字擷取的方法。不過，在此處我們不做過多的深入，因為這裡所說的文字擷取是針對於單行文字。
對於單行文字的擷取，需要同時滿足三個條件：明確的寬度、文字強制不換行和隱藏多餘文字。只有在這三個條件都成立的情況這下，配合text-overflow屬性才能擷取文字，並用…代替擷取不顯示的文字。
知道實現的方法，定義
從W3cplus最近的更新都可以看出我的學習新動向。是的，自從開始學習SASS之後，我喜歡上了SASS。因為他能讓我的工作效率更快，同時讓我更加節約出時間去做一些我自己喜歡的事情。
現在開始我開始使用SASS私下用在我喜歡的專案中，讓我更加的對SASS喜歡與執著。在使用 pan 兩個 cat clas 減少 輕松 十個 發現 手動 摘要：作者Veera Sundar在清理代碼工作時發現一些常見的違規編碼，因此，Veera Sundar把針對常見的一些違規編碼總結成一份列表，以便幫助Java愛好者提高代碼的質量和可維護性。
最近，我給Jav
問題一：Too many connections（連線數過多，導致連線不上資料庫，業務無法正常進行）
問題還原
mysql> show variables like '%max_connection%';
| Variable_name | Value |
max_conn
身為程式設計師，你肯定知道和其他技術工作面試比起來，程式設計工作的面試流程略有不同。
本文就程式設計師在程式設計面試中應當避免的10個問題進行說明，同時也給出瞭如何解決這些問題的建議。
1.從未在紙上或白板上寫過程式碼
這是求職者最容易犯的大錯之一。絕大多數程式設計面試都會安排在紙上或白板上。而與電
1、氣泡排序
2、計算x的n次方的方法
3、計算a*a + b*b + c*c + ……
4、計算階乘 n!
5、列出當前目錄下的所有檔案和
微軟已於7月29日正式釋出了最新的Windows 10系統，免費升級政策堪稱新系統的最大亮點。由於免費升級期限僅有一年，於是相當多的網友都選擇在第一時間內通過微軟官方或360等第三方渠道升級了Win10系統。
但在升級系統過後，卻有很多網友反映遇到了QQ無法使用、不知如何修改預設瀏覽器等各類問題。此次《十問 list != trac 其它 完整 onf 啟動 ref bst 1.String 相等
稍微有點經驗的程序員都會用equals比較而不是用 ==，但用equals就真的安全了嗎，看下面的代碼
user.getName().equals("xiaoming");
今天給大家分享十個Python入門級別的小案例。這十個案例的難度不高，但是對於知識的使用非常全面，很適合小白在學習的初期建立學習信心和增加熟練度。每個案例下都有或多或少的思路分析，希望對大家有幫助
推薦下小編的Python學習群:629440234，不管你是小白還是大牛，小編我都歡
1.static的作用
static，顧名思義，靜態。當類中的成員變數或方法宣告為static時，無需為此類建立參照，便可對其進行操作。即，不依賴該類的例項，同時也被該類的例項所共享。下面通過兩種static的使用情況進行分析：
static變數
同為成員變數，與例 img 變化 關於 軟件 配置 封裝 基礎 ftk 開發者 Devops基礎設施自動化的工具
有許多工具用於基礎設施自動化。使用哪個工具決定於體系結構和基礎設施的需求。下面我們列出了一些偉大的工具，用於不同類別配置管理、編制、持續集成、監控等。
1.Chef
Chef是一
因為在 VS 2010 上跑就是正常，一佈署上 IIS 就掛。 ( 以下 10 個問題都是上了 iis 後才會出現錯的 )
結果花了很多的時間找
另外，若是想要知道更詳細的內容，請在 vs 2010 debug 的程式中外掛上 IE 和 IIS ( 也許有人會忘了它！
1.冷備份和熱備份的不同點以及各自的優點
解答:熱備份針對歸檔模式的資料庫，在資料庫仍舊處於工作狀態時進行備份。而冷備份指在資料庫關閉後，進行備份，適用於所有模式的資料庫。熱備份的優點在於當備份時，資料庫仍舊可以被使用並且可以將資料庫恢復到任意一個時間點。冷備份的優點在 ima 斐波那契數 是我 取消 process fda cdb 排序 fff 1、冒泡排序2、計算x的n次方的方法3、計算aa + bb + c*c + ……4、計算階乘 n!5、列出當前目錄下的所有文件和目錄名6、把一個list中所有的字符串變成小寫：7、輸出某個路徑下的
1、DOM結構——兩個節點之間可能存在哪些關係以及如何在節點之間任意移動。document.documentElement 返回文件的根節點<html> document.body <body> document.activeElem
前面已經講過很多Golang系列知識，包括併發，鎖等內容，感興趣的可以看看以前的文章，https://www.cnblogs.com/zhangweizhong/category/1275863.html，
接下來講幾個golang常見的併發模型，今天先說說生產者消費者模型。
生產者消費者模型 大小寫 ace strstr tex str 個數 第三天 替換函數 rst 1，substr() 字符串截取
2，str_replace()字符串替換函數，區分大小寫
3，str_ireplace() 字符串替換函數，不區分大小寫
4,substr_count()統計一個 並且 有變 開發工具 utf-8 sass com nbsp 編程 html 關於sass大家都知道是一種css的開發工具，原本的css沒有變量 參數一類的東西，所以比較死 效率較慢。
sass就是在css裏面加入了一些編程的元素如變量等，讓css能夠 雙引號 超時 而不是 也會 per 遠程 設置 作用 我們 在項目開發過程中，經常遇到了一些PHP處理程序性能底下的情況，程序運行在centos+nginx環境，雖然這個有很多的原因如：服務器本身配置，運行環境nginx服務，php-fpm配置等等，更多有一點仍然是PHPe 排序算法 算法 pan .cn span spa nbsp 小時 重復 1.快速排序
快速排序使用的是分而治之的方法，步驟：
把數列的第一個數作為基準
走訪數組的每一個數，將小於基準的數放到基準的左邊，大於或等於的就放在右邊
將上一步得到的兩個數組進行相同的處理
不斷地 odin cookie page 表單 word sca -a 實例 登錄限制 #-*-coding:utf-8 -*-__author__ = "ruoniao"__date__ = "2017/5/31 20:59" 之前我們通過爬取伯樂在線的文章,伯樂在線對爬取沒有
相關推薦
SASS基礎——十個常見的Mixins
Java中十個常見的違規編碼
MySQL十個常見錯誤
程式設計師程式設計面試中的十個常見錯誤，茶話匯教你如何化解！
Python三十個常見的指令碼彙總！
升級Win10前後的十個常見問題 你躺槍了嗎？
java幾個常見的基礎錯誤
十個python入門基礎小案例，看不懂的童鞋要注意
十個不可忽視的Java基礎知識
十個強大的DevOps基礎設施自動化工具，不容錯過
asp.net部署上IIS後常見的十個錯誤
Oracle面試過程中常見的二十個問題
Python二十九個常見的腳本匯總！
前端十個基礎面試題及答案
Golang 入門系列（十七）幾個常見的併發模型——生產者消費者模型
php函數每日學習二十個(第三天)
初遇sass的兩個小問題
五十個小技巧提高PHP執行效率(一)
幾個常見的排序算法
Scrapy基礎(十四)————知乎模擬登陸