huanz / Mixins
sass mixins
Stars: ✭ 132
Projects that are alternatives of or similar to Mixins
Sassessentials
Repository for my tutorial course: Sass Essential Training on LinkedIn Learning and Lynda.com.
Stars: ✭ 167 (+26.52%)
Mutual labels: mixins, scss, sass
Skeleton Sass
Skeleton Sass is a highly modular version of Skeleton CSS
Stars: ✭ 151 (+14.39%)
Mutual labels: mixins, scss, sass
Browser Hack Sass Mixins
Browser hack sass mixin - Apply your SCSS to a specific browser - CSS hacks for: IE, Chrome, Firefox, Edge, Opera
Stars: ✭ 170 (+28.79%)
Mutual labels: mixins, scss, sass
Mq Scss
Extremely powerful Sass media query mixin. Allows you to create almost any media query you can imagine.
Stars: ✭ 122 (-7.58%)
Mutual labels: mixins, scss, sass
Fictoan
Mockups with markup — https://sujan-s.github.io/fictoan/
Stars: ✭ 114 (-13.64%)
Mutual labels: scss, sass
Styled Jsx Plugin Sass
Plugin to add Sass support to styled-jsx. Warning this is a Proof Of Concept plugin.
Stars: ✭ 115 (-12.88%)
Mutual labels: scss, sass
Hocus Pocus
Universal and lightweight stylesheet starter kit
Stars: ✭ 128 (-3.03%)
Mutual labels: scss, sass
Sscss
Light Sass lib for managing your font-size, margin, padding, and position values across breakpoints.
Stars: ✭ 119 (-9.85%)
Mutual labels: scss, sass
Lightning Admin Angular
A mobile first design of a responsive admin template built with angular and bootstrap
Stars: ✭ 107 (-18.94%)
Mutual labels: scss, sass
Rollup Plugin Styles
🎨 Universal Rollup plugin for styles: PostCSS, Sass, Less, Stylus and more.
Stars: ✭ 116 (-12.12%)
Mutual labels: scss, sass
Quickmenu
The new era of mobile navigation for the web, we're out of hamburgers.
Stars: ✭ 119 (-9.85%)
Mutual labels: scss, sass
Sass Vars Loader
Use Sass variables defined in Webpack config or in external Javascript or JSON files
Stars: ✭ 112 (-15.15%)
Mutual labels: scss, sass
Plate
Plate: a super stripped-down WordPress starter theme for developers.
Stars: ✭ 110 (-16.67%)
Mutual labels: scss, sass
Light Blue Dashboard
🔥 Free and open-source admin dashboard template built with Bootstrap
Stars: ✭ 110 (-16.67%)
Mutual labels: scss, sass
Frasco
Quick starter for Jekyll including full setup for Sass, PostCSS, Autoprefixer, stylelint, Webpack, ESLint, imagemin, Browsersync, etc.
Stars: ✭ 123 (-6.82%)
Mutual labels: scss, sass
Awesome Sass
Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly.
Stars: ✭ 1,714 (+1198.48%)
Mutual labels: scss, sass
Baseguide
Lightweight and robust CSS framework for prototyping and production code.
Stars: ✭ 127 (-3.79%)
Mutual labels: scss, sass
mixins-sass
sass mixins,require Sass ~> 3.3.0
utility
prefix
clearfix
float
text-overflow
animation
placeholder
rem
opacity
arrow
triangle
center
media
box-sizing
touch-scroll
font
onepx
balloon
side-line
functions
string
list
usage
npm i mixins-sass --save
@import "./node_modules/mixins-sass/src/mixins";
utility
prefix
/**
* @param $map css列表
* @param $vendors 浏览器前缀,默认:webkit moz ms o
*/
@mixin prefix($map, $vendors: webkit moz ms o)
.test {
@include prefix((transliton: all 0.5s ease-out), webkit);
}
clearfix
@include clearfix;
float
@include float(left);
text-overflow
文字超出显示省略号,支持多行
/**
* @param $line 超出显示省略号的行数,默认:1
* @param $substract 为预留区域百分比%,默认:0
*/
@mixin text-overflow($line: 1, $substract: 0);
animation
@include animation(slideUp 900ms ease both) {
0% {
transform: translate3d(0, -200px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
placeholder
// scss
@include placeholder() {
...
}
// css
::-webkit-input-placeholder {
...
}
::-moz-placeholder {
...
}
:-ms-input-placeholder {
...
}
rem
px转rem
/**
* @param $property css属性
* @param $values css属性值
* @param $support-ie 是否对不支持rem的浏览器使用px
* @param $base 基准字体大小,如果不传会搜索全局变量 $base-font,如果没有默认为 16px
*/
@mixin rem($property, $values, $support-ie: true, $base: null)
@include rem('padding', '10px 5px 5px 10px', true, '16px');
opacity
兼容ie的透明度
arrow
生成上下左右的小箭头:http://lugolabs.com/caret
/**
* @param $width
* @param $border-width
* @param $direction: top bottom left right
* @param $background-color
* @param $position 默认relative
*/
@mixin arrow($width, $border-width, $direction, $color, $background-color, $position: relative)
@include arrow(10px, 1px, 'bottom', '#00f', '#fff');
triangle
三角形生成
/**
* @param $width
* @param $height
* @param $color
* @param $direction: top bottom left right
*/
@mixin triangle($width, $height, $color: #000, $direction: bottom)
/**
* svg背景图生成三角形
*/
@mixin svg-triangle($width, $height, $color: #000, $direction: bottom)
@include triangle(10px, 5px);
center
居中
/**
* @param $direction: horizontal vertical both, default: both
*/
@include center;
media
媒体查询相关
/**
* @param $min min-width
* @param $max max-width
*/
@mixin screen($min, $max)
@mixin max-screen($width)
@mixin min-screen($width)
@mixin hidpi($ratio: 1.3)
/**
* @param $filename
* @param $retina-filename 多个或者一个
* @param $ratio 多个或者一个
* @param $background-size
*/
@mixin retina-image($filename, $retina-filename, $ratio: 1.3, $background-size: 100%)
@mixin iphone6($orientation: all)
@mixin iphone6plus($orientation: all)
@mixin iphone5($orientation: all)
@mixin iphone4($orientation: all)
@mixin ipad($orientation: all)
@mixin ipad-mini($orientation: all)
@mixin ipad-retina($orientation: all)
@include retina-image(test.png, test@2.png test@3.png, 2 3);
box-sizing
html {
@include box-sizing(border-box);
}
touch-scroll
body {
@include touch-scroll;
}
// css
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
font
中文字体解决方案,来自https://github.com/zenozeng/fonts.css,有font-hei
、font-kai
、font-song
、font-fang-song
。
body {
@include font-hei;
}
onepx
移动端1像素
方案,通过background-image
渐变色实现
/**
* @param $color
* @param $direction: top bottom left right vertical all, default: all
* @param $pseudo: after before, default: after
*/
.border-l {
@include onepx(#eee, left);
}
onepx-scale
通过transform
实现,支持圆角
/**
* @param $color
* @param $direction: top bottom left right vertical all radius, default: all
* @param $pseudo: after before, default: after
* @param $radius default: 1px
*/
.border-r {
@include onepx-scale(#eee, radius, after, 2px);
}
balloon
气泡提示,来自:balloon.css
/**
* @param $direction: top bottom left right
* @param $bg 气泡提示背景颜色
* @param $trangle-width 气泡小三角形宽度
* @param $trangle-height 气泡小三角形高度
* @param $color 气泡文字颜色
* @param $font 气泡文字大小
*/
@mixin balloon($direction, $bg, $trangle-width: 18px, $trangle-height: 6px, $color: #fff, $font: 12px)
.balloon {
@include balloon(top, #000);
}
<span class="balloon" data-balloon="Whats up!">Hover me!</span>
side-line
线中间夹文字效果
http://codepen.io/anon/pen/XjNEAR
/**
* @param $height 线高 default: 1px
* @param $space 线距离文字两边的距离 default: 0.5em
* @param $color 线颜色 default: inherit
* @param $style border-style default: solid
* @param $adjust 线距离底部的距离,默认垂直居中 default: false
* @param $double 是否需要两条线
*/
@mixin side-line($height: 1px, $space: 0.5em, $color: inherit, $style: solid, $adjust: false, $double: false)
.side-line {
@include side-line;
}
functions
string
str-split
字符串分隔
@function str-split($string, $delimiter: " ")
str-repeat
字符串重复
@function str-repeat($string, $times)
str-replace
字符串替换
@function str-replace($string, $search, $replace: "")
list
first
返回列表第一项
@function first($list)
last
返回列表最后一项
@function last($list)
prepend
向列表前面插入一个
@function prepend($list, $value)
insert-nth
向列表某个位置插入
@function insert-nth($list, $index, $value)
replace
替换列表的某个元素 $recursive
是否全部替换
@function replace($list, $old-value, $new-value, $recursive: false)
replace-nth
替换列表某个位置的元素
@function replace-nth($list, $index, $value)
remove
删除列表某个元素 $recursive
是否删除所有
@function remove($list, $value, $recursive: false)
remove-nth
删除列表指定位置元素
@function remove-nth($list, $index)
slice
截取列表中的一部分
@function slice($list, $start: 1, $end: length($list))
to-string
列表变成字符串,$glue
为连接符,$is-nested
是否是嵌套的列表
@function to-string($list, $glue: '', $is-nested: false)
shift
将列表部分元素前置
@function shift($list, $index: 1)
contain
列表是存在某个值
@function contain($list, $value)
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].