This question already has answers here:
SCSS extend a nested selector and override the nested rulesets
(4 answers)
Closed 7 years ago.
I'm pretty new to SASS and I'm currently using a library written in SASS.
I would like to override not only variables from this library but also styles for a few bits. How can I override this style without duplicating CSS for that specific class ?
To be clear, let's say I have this class in my library which I import in my main.scss:
.twitter-foo {
float: none;
}
Now in my own file:
.twitter-foo {
float: a lot more;
}
Then my output is:
.twitter-foo {
float: none; // overriden!
}
.twitter-foo {
float: a lot more;
}
Well it works but it's dirty and I hate duplicating code, not mentioning the slightly longer page load. In case I would like to redefine .twitter-foo from my library, what can I do to avoid the bloated CSS ?
EDIT: I'm not talking about a middleware (minifier?) between SASS and CSS output but just SASS really.
What you could do is be more specific, meaning add more selectors so you can target .twitter-foo in different ways. Try giving your body tag a page id or your main element is what I usually do. So...
<body id="page1">
</body>
then in the scss you can:
#page1 .twitter-foo {
float:none;
}
OR
to override or not override add !important to the end of the style for example:
.twitter-foo {
float:none !important;
}
hope that helps.
Edit
As discussed Can the SASS minifier remove duplicate styles?
you may be able to compile your sass then run it through a css tidy which will remove duplicate classes and stuff or try out that ruby gem in the answers http://zmoazeni.github.io/csscss/.
Related
Quick question-- in Sass, is it possible to get the content of an element, and based off of it, return a certain style?
For example:
<div class="number">5</div>
// CSS
.number {
color: red; //If content of .number > 5
color: blue; //If content of .number < 5
}
Sorry if this has been asked before, there are a ton of Sass/Conditional questions, and if so, I'll just delete this.
Since SASS actually has to be precompiled to be converted to CSS, which works without knowledge of what HTML will be used: No, this is not possible.
You will have to use Javascript or different semantic CSS classes.
This question already has answers here:
False positive "undefined variable" error when compiling SCSS
(4 answers)
Closed 7 years ago.
My question is actually broader than the title says. This is just where I am running into a snag with my idea, but I am open to all sorts of solutions. Let me explain my overall goal.
I like what CSS preprocessors can do. I like the ideas of OOCSS and SMACSS. I am new to all of this. I am trying to upgrade my design methods to somehow incorporate the best of all worlds. I have a theoretical method that works like this:
use only semantic class names or id's or whatever
define modules or patterns in some common style sheet
have per page stylesheets that #extend modules from the common stylesheet onto the semantic selectors pertaining to a given page
So this:
/* modules.scss */
.ruddy {color: red}
.fullwidth {width: 100%; display: block;}
plus this:
/* homepage.scss */
#import modules.sass
#intro {#extend ruddy; #extend fullwidth}
aside {#extend ruddy;}
.thing {#extend fullwidth;}
becomes this:
/* homepage.css */
#intro, aside {color: red}
#intro, .thing {width: 100%; display: block;}
I haven't necessarily seen anybody else do this but it seemed like a good idea to me. The problem I am running into in my grand scheme is that #extend doesn't seem to work from an imported file. Someone somewhere else on SO said that it is not possible. Is this true? I got mixins to work but problem with them is that they duplicate every attribute in the output css, which doesn't seem ideal.
I'm actually more partial to LESS (syntax), but that doesn't even have extending at the moment. Should I not worry about the inefficiencies of mixins or is there some way to achieve what I'm asking for?
Note:
I am auto-compiling my sass with a tool called Prepros. When I try to compile code such as the above I get an error like.
WARNING on line 11 of ... \sass\home.scss: "#intro" failed to #extend "ruddy".
The selector "ruddy" was not found.
If I just copy the code from module.scss into homepage.scss then the problem goes away.
The problem is here:
#intro {#extend ruddy; #extend fullwidth}
aside {#extend ruddy;}
.thing {#extend fullwidth;}
ruddy and fullwidth aren't selectors. If you're extending the .ruddy class, you need to include the period, as that is part of the selector.
#intro {#extend .ruddy; #extend .fullwidth}
aside {#extend .ruddy;}
.thing {#extend .fullwidth;}
It is not true.
You can declare classes (including the %-prefixed ones) in one file, import the first file into the second file and extend the classes in the second file.
Example:
foo.sass
%foo
color: red
bar.sass
#import foo.sass
html
#extend %foo
Run sass bar.sass bar.css.
bar.css appears
html {
color: red; }
PS For real SASS experience, you should leverage Compass. Compass is a bunch of things under one name:
a handy tool to compile SASS efficiently;
a huge library of handy SASS styles for all occasions;
an ecosystem of extensions that you can install and use in your projects effortlessly. This is what makes SASS stand out. You don't have to reinvent the wheel over and over again.
UPD Finally error text!
You're missing the dot in the name of the class. aside {#extend ruddy;} should be aside {#extend .ruddy;}.
What I mean: for example I have a webpage, and a div that contains an application. Page has its own styles, but I want that application has its own style (for example twitter bootstrap styles). So is there a way to define CSS only for concrete wrapper, so that these styles for application cannot influence style of the page itself.
Sure we can always write kind of #wrapper .btn { // style }, but same twitter bootstrap has 100KB of styles so it would be a bit complicated to manage all the styles. It would be perfect if there was a construction similar to:
#wrapper {
.btn { //style }
.btn-group { // style }
}
which is equivalent to
#wrapper .btn { // style }
#wrapper .btn-group { // style }
I hope there is solution in CSS. Thanks in advance!
Twitter Botstrap uses less css http://lesscss.org/ which lets you do exactly what you mentioned:
#wrapper {
.btn { //style }
.btn-group { // style }
}
It is written as such, and then compiled into traditional css. Depending on which framework/language you are using (.net, php) there are plugins specific to them. We are using dot.less, along with bootstrap, it works great.
Not with plain CSS. You need to use a CSS pre-processor. There are a handful of them, and they all support this style of nesting.
Here are a few of the most popular ones:
Less http://lesscss.org/
Sass http://sass-lang.com/
Stylus http://learnboost.github.com/stylus/
There is also scoped styles, but browse support is very poor at the moment.
I remember reading about a Sass feature that allowed you to specify a list of elements and then a child and it would compile to a list of multiple selectors. I ahve searched around but can't find it.
I want it to compile down to this:
header .container,
footer .container
background: yellow
But i'm sure there is a feature of Sass that allows writing that in a much nicer way.
Any ideas?
That style could be refactored as this:
.container {
header &, footer & {
background: yellow;
}
}
But maybe you are thinking of a Compass feature? http://compass-style.org/reference/compass/helpers/selectors/#nest
This question already has answers here:
Nesting CSS classes
(8 answers)
Closed 4 years ago.
Some time ago I saw an example of a css file, where the css rules/selectors where specified in a nested way, e.g. something like this:
div.a {
color: red;
div.b {
font-weight: bold;
}
}
I'm not sure where I saw that (probably in a SO question), or whether it was exactly as shown above.
My questions: Is the above CSS correct/valid? Is it a standard way to specify CSS rules or is this a browser-dependent hack?
That is not valid standard CSS, but it's an example of nesting class declarations using Sass/SCSS or LESS and I believe other CSS extensions out there, which expand it to something like this (which is valid CSS), before serving it to the browser to use:
div.a {
color: red;
}
div.a div.b {
/* Inherits color from div.a */
font-weight: bold;
}
What you are probably referring to is LESS.
The example, you gave is not valid CSS, but is valid with LESS. LESS will "compile" the nested CSS and convert it to something which is valid CSS.
You can nest rules with SASS, http://sass-lang.com/
Maybe that was it?
Seems there is a proposal over at https://tabatkins.github.io/specs/css-nesting/
but I can't find the status of it