Button mixin sample build with Sass
A Pen by Bilal Çınarlı on CodePen.
| :root { | |
| color-scheme: dark; | |
| --primary: #bb86fc; | |
| --primary-variant: #3700b3; | |
| --on-primary: #000; | |
| --secondary: #03dac5; | |
| --secondary-variant: #d2e3fc; | |
| --on-secondary: #000; | |
| --on-secondary-variant: #018786; | |
| --surface: #121212; |
| # Install brew | |
| /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" | |
| # Install Chrome | |
| brew cask install google-chrome | |
| # Install hyper | |
| brew cask install hyper | |
| hyper install hyperline | |
| hyper install an-old-hype |
| const fs = require('fs'); | |
| const { rm } = require('./utils/file-actions'); | |
| const cwd = process.cwd(); | |
| const rm = (path) => { | |
| if (fs.existsSync(path)){ | |
| exec(`rm -r ${ path }`, (err) => { | |
| if (err) { | |
| console.log(err); |
| // Sometimes you want to share some variables between your SCSS and JS/JSX code | |
| // To do this, you can levarage the :export command in SCSS. | |
| $alertInfo: #b8d3e8; | |
| $alertWarning: #fdf9c3; | |
| $alertSuccess: #cfc; | |
| $alertError: #e63f3f; | |
| // this exports the variable to be available in JS | |
| :export { |
| var app = app || {}; | |
| (function(){ | |
| "use strict"; | |
| app.Collection = Backbone.Collection.extend({ | |
| model: app.Model, | |
| // initial sort when collection fetched first time | |
| comparator: "id" | |
| }); |
| /** | |
| * 1. http://www.paulirish.com/2012/box-sizing-border-box-ftw/ | |
| * http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ | |
| * http://fatihhayrioglu.com/css3-box-sizing-ozelligi/ | |
| * | |
| * 2. http://aestheticallyloyal.com/public/optimize-legibility/ | |
| * | |
| * 3. http://maxvoltar.com/archive/-webkit-font-smoothing | |
| * | |
| * 4. http://maximilianhoffmann.com/posts/better-font-rendering-on-osx |
| /* @author Bilal Cinarli */ | |
| /** ------------------------------------------- | |
| Text Related Functions | |
| ------------------------------------------- **/ | |
| /** | |
| * Rem to PX | |
| */ | |
| @function rem-to-px($font-size) { | |
| $u: unit($font-size); |
| /* @author Bilal Cinarli */ | |
| /** ------------------------------------------- | |
| Media Query Mixins | |
| ------------------------------------------- **/ | |
| /** | |
| * Retina Image | |
| */ | |
| @mixin retina-image($image, $ext: 'png'){ | |
| background-image: url('#{$images}#{$image}.#{$ext}'); |
| /* @author Bilal Cinarli */ | |
| /** ------------------------------------------- | |
| Size Related Mixins | |
| ------------------------------------------- **/ | |
| /** | |
| * Square or desired width-height for an element | |
| */ | |
| @mixin dims($width, $height: null) { | |
| width: $width; |