I have the following SASS rules:
p {
margin: 0;
}
#include desktop() {
p {
margin: 0;
}
}
The mixin is like this:
#mixin desktop() {
#media screen and (min-width: 1200px) {
#content;
}
}
Elsewhere in the codebase there's a margin being set on desktop, hence in this case I need to explicitly remove it on the desktop breakpoint too, just having the first p selector rule doesn't cut it.
Is there a neat way to combine the selectors as it feels verbose having the same margin: 0 rule twice? I realise there's probably something more fundamentally wrong here with the inheritance, but that's outside the scope of the question. I don't want to use !important.
Many thanks.
Is there a neat way to combine the selectors? Sure there is… Just use another mixin:
#mixin para {
p {
margin: 0;
}
}
#include para;
#include desktop {
#include para;
}
You clearly already know how to use mixins, so I'm assuming your question is really about whether you can nest one mixin within another (yes), or whether you can include selectors within a mixin (yes).
I don't know why but while compiling with grunt or anything there is an error called invalid property name
#flotTip {
border: none !important;
font-size: $font-size-small !important;
line-height: 1px !important;
#extend .tooltip-inner() !important;
}
in the above code in the line-height it produces an undefined property. My task was to convert all less files into sass files. Used many solutions to convert all of them to sass as far as I can find. But this one I can't find any solution. Can anyone answer what might be the problem?
Extend is only for extending simple selectors, like class, element, or id. You cannot use !important with #extend. This is the correct way to use extend:
.foo {
color: red;
}
#flotTip {
#extend .foo;
}
You may be confused confusing extends with mixins, which also cannot use !important. This is the correct way to use mixins:
#mixin foo() {
color: red;
}
#flotTip {
#include foo();
}
The line-height: 1px !important; line looks fine. The problem is with the following line. If you're trying to include a mixin, use #include and don't prefix the mixin's name with . (dot). Also, don't put !important after it.
I would guess that you are using #extend incorrectly. See the docs here: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#how_it_works
In Sass, I can't quite discern the difference between using #include with a mixin and using #extend with a placeholder class. Don't they amount to the same thing?
Extends do not allow customization, but they produce very efficient CSS.
%button
background-color: lightgrey
&:hover, &:active
background-color: white
a
#extend %button
button
#extend %button
Result:
a, button {
background-color: lightgrey;
}
a:hover, button:hover, a:active, button:active {
background-color: white;
}
With mixins, you get duplicated CSS, but you can use arguments to modify the result for each usage.
=button($main-color: lightgrey, $active-color: white)
background-color: $main-color
border: 1px solid black
border-radius: 0.2em
&:hover, &:active
background-color: $active-color
a
+button
button
+button(pink, red)
Results in:
a {
background-color: lightgrey;
border: 1px solid black;
border-radius: 0.2em;
}
a:hover, a:active {
background-color: white;
}
button {
background-color: pink;
border: 1px solid black;
border-radius: 0.2em;
}
button:hover, button:active {
background-color: red;
}
Please follow this consecutive set of code examples to see how you can make your code cleaner and more maintainable by using extends and mixins effectively: http://thecodingdesigner.com/posts/balancing
Note that SASS unfortunately does not allow using extends inside media queries (and corresponding example from the above link is wrong). In the situation where you need to extend based on media queries, use a mixin:
=active
display: block
background-color: pink
%active
+active
#main-menu
#extend %active // Active by default
#secondary-menu
#media (min-width: 20em)
+active // Active only on wide screens
Result:
#main-menu {
display: block;
background-color: pink;
}
#media (min-width: 20em) {
#secondary-menu {
display: block;
background-color: pink;
}
}
Duplication is inevitable in this case, but you shouldn't care too much about it because web server's gzip compression will take care of it.
PS Note that you can declare placeholder classes within media queries.
Update 2014-12-28: Extends produce more compact CSS than mixins do, but this benefit is diminished when CSS is gzipped. If your server serves gzipped CSS (it really should!), then extends give you almost no benefit. So you can always use mixins! More on this here: http://www.sitepoint.com/sass-extend-nobody-told-you/
A good approach is to use both - create a mixin that will allow you lots of customisation and then make extends for common configurations of that mixin. For example (SCSS Syntax):
#mixin my-button($size: 15, $color: red) {
#include inline-block;
#include border-radius(5px);
font-size: $size + px;
background-color: $color;
}
%button {
#include my-button;
}
%alt-button {
#include my-button(15, green);
}
%big-button {
#include my-button(25);
}
This saves you from calling the my-button mixin over and over. It also means you don't have to remember the settings for common buttons but you still have the ability to make a super unique, one-off button should you choose.
I take this example from a blog post I wrote not long ago. Hope this helps.
In my opinion extends are pure evil and should be avoided. Here is why:
given the scss:
%mystyle {color: blue;}
.mystyle-class {#extend %mystyle}
//basically anything not understood by target browser (such as :last-child in IE8):
::-webkit-input-placeholder {#extend %mystyle}
The following css will be generated:
.mystyle-class, ::-webkit-input-placeholder { //invalid in non-webkit browsers
color: blue;
}
When a browser doesn’t understand a selector, it invalidates the entire line of selectors. This means that your precious mystyle-class is no longer blue (for many browsers).
What does this really mean? If at any time you use an extend where a browser may not understand the selector every other use of the extend will be invalidated.
This behavior also allows for evil nesting:
%mystyle {color: blue;}
#mixin mystyle-mixin {#extend %mystyle; height: 0;}
::-webkit-input-placeholder {#include mystyle-mixin}
//you thought nesting in a mixin would make it safe?
.mystyle-class {#extend %mystyle;}
Result:
::-webkit-input-placeholder, .mystyle-class { //invalid in non-webkit browsers
color: blue;
}
::-webkit-input-placeholder {
height: 0;
}
Tl;dr: #extend is perfectly ok for as long as you never use it with any browser spesific selectors. If you do, it will suddenly tear down the styles wherever you have used it. Try to rely on mixins instead!
Use mixins if it accepts a parameter, where the compiled output will change depending on what you pass into it.
#include opacity(0.1);
Use extend (with placeholder) for any static repeatable blocks of styles.
color: blue;
font-weight: bold;
font-size: 2em;
I totally agree with the previous answer by d4nyll. There is a text about extend option and while I was researching this theme I found a lot of complaints about extend, so just have in mind that and if there is a possibility to use mixin instead of extend, just skip extend.
I'm new to Sass so I need help with the creation of a mixing for my input fields.
However, if anyone knows of an already made mixin for this or if Compass has one that accomplishes this, please let me (us) know.
I currently have the following CSS rules in my .scss file:
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="url"],
textarea,
select { ... }
input[type="text"]:hover,
input[type="text"]:focus,
input[type="password"]:hover,
input[type="password"]:focus,
input[type="email"]:hover,
input[type="email"]:focus,
input[type="search"]:hover,
input[type="search"]:focus,
input[type="url"]:hover,
input[type="url"]:focus,
textarea:hover,
textarea:focus,
select:hover,
select:focus { ... }
Now, as we know HTML5 provides a nice new set of input types, but right now I don't need to add input types like date, month or week, that's why I don't have them listed "yet".
So in the case I need to add them in the future, I'll update that list you see above.
However, my problem is that I feel I'm repeating myself all over here, plus, the work of selecting items, copying, pasting and editing every time for every new input type I add to the list is just plain dumb and I almost sure Sass' mixins can be of help with this. The problem is that creating a mixin for this is honestly very confusing to me.
I've looked around here and the web for something similar but haven't been able to find anything.
Any help with this is greatly appreciated.
Ok, I eventually found the Sass mixing library Bourbon.
They have an 'add-on' for HTML5 input types (here's a link to the .scss file they created), but it doesn't have the :hover or :focus pseudo elements. So I added them.
I honestly don't know if what I did is the best way to write this mixin, but the thing works marvelously:
//************************************************************************//
// Generate a variable ($all-text-inputs) with a list of all html5
// input types that have a text-based input, excluding textarea.
// http://diveintohtml5.org/forms.html
//************************************************************************//
$inputs-list: 'input[type="email"]',
'input[type="number"]',
'input[type="password"]',
'input[type="search"]',
'input[type="tel"]',
'input[type="text"]',
'input[type="url"]',
// Webkit & Gecko may change the display of these in the future
'input[type="color"]',
'input[type="date"]',
'input[type="datetime"]',
'input[type="datetime-local"]',
'input[type="month"]',
'input[type="time"]',
'input[type="week"]';
$unquoted-inputs-list: ();
#each $input-type in $inputs-list {
$unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
}
$all-text-inputs: $unquoted-inputs-list;
// You must use interpolation on the variable:
// #{$all-text-inputs}
//************************************************************************//
// #{$all-text-inputs}, textarea {
// border: 1px solid red;
// }
// :hover and :focus pseudo elements
// Added by Ricardo Zea
// http://ricardozea.net
// #ricardozea
// Tracking: http://stackoverflow.com/questions/13180807/sass-create-mixin-for-input-fields
$inputs-list-hf:'input[type="email"]:hover',
'input[type="number"]:hover',
'input[type="password"]:hover',
'input[type="search"]:hover',
'input[type="tel"]:hover',
'input[type="text"]:hover',
'input[type="url"]:hover',
'input[type="color"]:hover',
'input[type="date"]:hover',
'input[type="datetime"]:hover',
'input[type="datetime-local"]:hover',
'input[type="month"]:hover',
'input[type="time"]:hover',
'input[type="week"]:hover',
'input[type="email"]:focus',
'input[type="number"]:focus',
'input[type="password"]:focus',
'input[type="search"]:focus',
'input[type="tel"]:focus',
'input[type="text"]:focus',
'input[type="url"]:focus',
'input[type="color"]:focus',
'input[type="date"]:focus',
'input[type="datetime"]:focus',
'input[type="datetime-local"]:focus',
'input[type="month"]:focus',
'input[type="time"]:focus',
'input[type="week"]:focus';
$unquoted-inputs-list-hf: ();
#each $input-type-hf in $inputs-list-hf {
$unquoted-inputs-list-hf: append($unquoted-inputs-list-hf, unquote($input-type-hf), comma);
}
$all-text-inputs-hf: $unquoted-inputs-list-hf;
// You must use interpolation on the variable:
// #{$all-text-inputs-hf}
//************************************************************************//
// #{$all-text-inputs-hf}, textarea {
// border: 1px solid red;
// }
As you can see I copied and pasted the original mixing and added the prefix -hf and of course the :hover and :focus to the new rules.
And in my .scss file I added this #import:
#import "html5-input-types"; (no need for the underline _ or file extension .scss)
And in the 'Forms' section of my .scss file I added these rules:
/*Normal state*/
#{$all-text-inputs},
textarea,
select { ... }
/*:hover and :focus states*/
#{$all-text-inputs-hf},
textarea:hover,
textarea:focus,
select:hover,
select:focus { ... }
I know I have textarea and select outside the mixin file (html5-input-types.scss), not sure yet if I'm including them in it or not, gotta think about it.
Anyway, this worked for me pretty well and although I will still need to update the html5-input-types.scss if anything changes in the future, at least I'm handling these input fields way more efficiently than before.
Hopefully what I did here helps someone else.
And if any of you has a suggestion to improve the mixin, by all means let me (us) know.
Thanks.
In case anyone comes across this for the same reason I did. Why not let SASS do the work?
CodePen
$form-background: #f8f8f8;
$form-color: #000;
$form-border: 1px solid lighten($form-color, 50%);
$form-focus-background: darken($form-background, 10%);
$form-focus-color: #999;
$form-focus-border: 1px solid $form-color;
%input-styles {
width: 15em;
min-height: 30px;
margin: 0 0 15px 15px;
background: $form-background;
color: $form-color;
border: $form-border;
transition: .2s ease-in-out;
transition-property: color, background-color, border;
}
%input-styles--focus {
background-color: $form-focus-background;
color: $form-focus-color;
border: $form-focus-border;
}
#mixin input-styles($styles, $focus_styles) {
$types: 'email', 'number', 'radio', 'password', 'search', 'tel',
'text', 'url', 'color', 'date', 'datetime',
'datetime-local', 'month', 'time', 'week';
#each $type in $types {
input[type="#{$type}"] {
#extend #{$styles};
&:focus {
#extend #{$focus_styles};
}
}
}
select,
textarea {
#extend #{$styles};
&:focus {
#extend #{$focus_styles};
}
}
}
#include input-styles('%input-styles', '%input-styles--focus');
I'm trying to get SASS to do something akin to an abstract superclass in programming. I'm getting as far as the superclass part
.box {
#include span-columns(1);
#include border-radius(5px);
height: 360px;
overflow: hidden;
}
article {
#extend .box;
}
figure {
#extend .box;
}
This is a way to define commonalities of boxes without duplicating them in the generated CSS, as would happen with a mixin. However, this solution has the blemish of defining a rule for a (CSS) class "box" that I don't really need and want.
To be sure, this is a minor issue, still I'd like to know if there is a way to make ".box" into a label that is only used during SASS preprocessing and does not appear in CSS.
You want to define your "superclass" using a % instead of a .
%box {
#include span-columns(1);
#include border-radius(5px);
height: 360px;
overflow: hidden;
}
article {
#extend %box;
}
figure {
#extend %box;
}
Note that this requires version 3.2+