This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@include keyframes(fadeIn) { | |
from { | |
opacity: 0; | |
} | |
to { | |
opacity: 1; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.vp-button { | |
padding: 1rem 2rem; | |
background: $button-bgcolor; | |
// Variants/Subcomponents | |
&-secondary { | |
background: $button-secondary-bgcolor; | |
} | |
// Modifiers |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.4.6) | |
// Compass (v1.0.1) | |
// ---- | |
input[type="color"], | |
input[type="date"], | |
input[type="datetime"], | |
input[type="datetime-local"], | |
input[type="email"], |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.4.6) | |
// Compass (v1.0.1) | |
// ---- | |
input[type="color"], | |
input[type="date"], | |
input[type="datetime"], | |
input[type="datetime-local"], | |
input[type="email"], |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.4.7) | |
// Compass (v1.0.1) | |
// ---- | |
.mobile-foo { | |
@extend %col-4-small; | |
} | |
.tablet-foo { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
angular.module('App', ['Goats', 'ngMockE2E']) | |
.run(['$httpBackend', function($httpBackend) { | |
var goats = [{}]; | |
$httpBackend.whenGET(/views.*/).passThrough(); | |
$httpBackend.whenGET('/goats').respond(goats); | |
$httpBackend.whenGET(/goat\/.*/).respond(function(method, url, data) { | |
var name = url.split('/')[2]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
---------- | |
# Calculating Specificity in Sass | |
As any web developer who has to write CSS knows, specificity is both an important and confusing concept. You might be familiar with principles such as avoiding nesting and IDs to keep specificity low, but knowing exactly *how* specific your selectors are can provide you valuable insight for improving your stylesheets. Understanding specificity is especially important if you are culpable of sprinkling `!important;` throughout your CSS rules in frustration, which ironically, makes specificity less important. | |
**TL;DR:** You can find the calculator source [here on GitHub](https://github.com/davidkpiano/sass-specificity). Also, check out some [examples on SassMeister](http://sassmeister.com/gist/dbf20a242bcccd1d789c). | |
## What is Specificity? |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var RecordSortingService = [function() { | |
var sortables = []; | |
function getSortable(context) { | |
var sortable = sortables.filter(function(sortable) { | |
return sortable.context == context; | |
})[0]; | |
if (!sortable) { | |
sortable = new Sortable(context); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.4.7) | |
// Compass (v1.0.1) | |
// ---- | |
// Let's say I have a button component... | |
%button { | |
display: inline-block; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.4.9) | |
// Compass (v1.0.1) | |
// SassyLists (v2.2.1) | |
// ---- | |
// function fibonacci(){ | |
// var fn1 = 1; | |
// var fn2 = 1; | |
// while (1){ |
OlderNewer