Family.scss
Version v1.0.8
Family.scss is a set of 26 smart Sass mixins which will help you to manage the style of :nth-child'ified elements, in an easy and classy way.
Website : http://lukyvj.github.io/family.scss/
Installation
Regular
- Clone the project
$ middleman( You don't use middleman ? Goto https://middlemanapp.com/ )
Alternative install
$ npm install family.scss$ bower install family.scssgem install family-rails(maintained by pzi)
Family.scss on npm
Usage
First of all, you need to import Family.scss into your project. If you're using eyeglass you can import it as such:
@import "family";
Otherwise import the Family.scss source file.
Then you can use the mixins right away on your stylesheets.
Input :
ul li {
background: blue;
@include first(3) {
background: blue;
}
}
Output :
ul li {
background: blue;
}
ul li:nth-child(-n + 3) {
background: blue;
}
Why only Sass ?
It's true, I did it for Sass, but some awesome contributors extended it to :
Stargazers over time
Changelogs
v1.0.8
- Repository consistency | No changes on the lib.
v1.0.7
- Repository consistency - No big changes on the lib.
- The source
family.scssfile is now onsource/src/_family.scssinstead ofsource/src/family.scss
v1.0.6
each-after()mixin removed, re-opening #37
v1.0.5
first-child()mixin added.last-child()mixin added.each-after()mixin added, closing #37- Mention Holmes.js in the about modal.
v1.0.3
first()mixin now uses:first-childif the given parameter is1, closing #10n-between()mixin added, closing #35at-least(),at-most()andin-between()quantity queries mixins added, closing #24pair-between()is noweven -between(), closing #34impair-between()is nowodd-between(), closing #34- Source code for the header pattern generator added in the about modal
- Version number added in the footer
backdrop-filterremoved from the about page
-
& 用在嵌套代码里，来引用父元素 .dashboard { &-container { margin: 30px; } &-text { font-size: 30px; line-height: 46px; } } 转换为css则为 .dashboard-container { margin: 30px; } .dashboard-text
-
$theme-Color:#004FBF; $theme-fontFamily:'.PingFangSC-Semibold'; $reguler-fontFamily:'.PingFangSC-Regular'; $medium-fontFamily:'.PingFangSC-Medium'; $font-d9:#D9D9D9; $font-f0:#F0F0F0; @mixin gradie
-
CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言 Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点： 文件扩展名不同，Sass 是以“.sass”后
-
嵌套规则 // scss #id { color: red; .name { color: blue; .child { color: yellow; } } } // css #id { color: red; } #id .name { color: blue; } #id
-
原文网址：Scss--变量--使用/实例_IT利刃出鞘的博客-CSDN博客 简介 本文用示例介绍Scss的变量的用法。 变量以美元符号（$）开头，赋值方法与 CSS 属性的写法一样。 简单示例 Scss： $width: 5em; #main { width: $width; } 编译后的CSS： #main { width: 5em; } 作用域 说明
-
在项目中使用scss 1.vue项目中使用npm引入scss npm install --save-dev sass-loader //安装scss支持 npm install --save-dev node-sass build/webpack.base.conf.js中加入： { test: /.s[a|c]ss$/, loaders: ['style', 'css', 's
-
早已忘记何时、何因开始使用scss，记忆的深处早期对scss的感官是，有个叫node-sass的库总是安装不了，被py支配的恐惧。重温下scss的文档，回顾下 API。 一、安装与编译 依赖环境ruby，自行安装运行时。 1.1 安装 linux 下安装命令 gem install sass // 使用 ruby 的包管理工具安装 sass -v // 验证是否安装成功 1.2 交互式 shell
-
公司的项目做了有一段时间了，由于之前对scss的了解比较少项目中用到的scss相关的东西只有scss的嵌套如下 .body{ width: 200px; .item{ width: 100px; } } 现在项目做了有一段时间了，决定好好的研究一下scss这个css预处理器。 项目用的是vue框架。 scss安装（npm） npm install --save-dev sass
-
/* use @import base.scss file and file's may not have suffix */ @import 'base_font'; @import 'base_color.scss'; @import 'base_pattern.scss'; //company-name use for company project $company-name: nic
-
(Sass::Script::Value::Bool) unitless($number) Returns whether a number has units. Examples: unitless(100) => true unitless(100px) => false Parameters: $number (Sass::Script::Value::Number) Returns: (S
-
Scss的强大毋庸置疑，而且传统的css编写也是让人头疼。 Scss拥有强大的去重思想，css样式往往会产生大量的重复性代码 Scss可以定义变量 Scss可以进行数学运算 Scss可以进行条件判断 Scss可以进行循环 Scss具有良好的结构特性 代码段 .total-vote-container { width: 2304px; height: 960px; backg