Quite often I need to write something like:
h1, h2, h3, h4, h5, h6 {
font-family: 'myfont';
font-weight: normal;
&.public {
color: $white;
}
}
But I'd like to add a specific rule to h1.public only. Of couse, I could add:
h1.public {
font-size: 2em;
}
but this is because my example is simple and still this is not really DRY. What I'd like is to have it wrapped in my code. Something like:
h1, h2, h3, h4, h5, h6 {
font-family: 'myfont';
font-weight: normal;
&.public {
color: $white;
&:only(h1) {
font-size: 2em;
}
}
}
Just like media queries work.
Is there a way I can do this?
You have different possible approach:
See in live
/* Version 1: with #at-root */
h1 {
#at-root &, h2, h3, h4, h5, h6 {
font-family: 'myfont';
font-weight: normal;
&.public {
color: #FFF;
}
}
&.public {
font-size: 2em;
}
}
/* Version 2: with placeholders */
%org-heading {
font-family: 'myfont';
font-weight: normal;
&.is-public {
color: #FFF;
}
}
#for $i from 1 to 6 {
h#{$i} {
#extend %org-heading;
#if 1 == $i {
&.is-public {
font-size: 2em;
}
}
}
}
/* Version 3: with modular approach */
.org-heading {
font-family: 'myfont';
font-weight: normal;
&--public {
color: #FFF;
&.isFirst {
font-size: 2em;
}
}
}
Related
I have tried sass
.title {
font-weight: bold;
// more title styles
&h1 {
font-size: 30px;
}
}
Resulting css is:
.titleh1 {
font-weight: bold;
// more title styles
}
.titleh1 {
font-size: 30px;
}
Is there anyway I can keep the h1 nested in the .title to give css output like this?
.titleh1 {
font-weight: bold;
// more title styles
}
h1.title {
font-size: 30px;
}
Yes, you just need the #at-root directive to jump back out of your nested selector:
.title {
font-weight: bold;
// more title styles
#at-root {
h1#{&} {
font-size: 30px;
}
}
}
I have a scenario in sass
.A{
background-color: red;
Padding :20px;
h4{ padding-bottom :20px;}
}
// another class
.B{
background-color : blue;
padding : 20px
h4{ padding-bottom:20px}
}
Question: how can i combine padding and h4 together in SASS without to repeating padding and h4 properties
The most straight forward way is to use #extend.
%common_properties {
padding: 20px;
h4 {
padding-bottom: 20px;
}
}
.a {
#extend %common_properties;
background-color: red;
}
.b {
#extend %common_properties;
background-color: blue;
}
You really don't save much by using sass/scss for this small of a redundancy
A solution with scss:
.a, .b {
padding: 20px;
background-color: red;
& h4 {
padding-bottom: 20px;
}
}
.b{
background-color:blue;
}
That solution in plain css:
.a, .b {
padding: 20px;
background-color: red;
}
.a h4, .b h4 {
padding-bottom: 20px;
}
.b {
background-color: blue;
}
Here is what that will look like:
http://codepen.io/cawoelk/pen/Ciqyw
I've got the following loop producing some styles for a tag cloud. On the online generators it produces the I'd consider the correct css styles, however in the visual studio solution (2012) which auto produces the css it seems to hang up. (see below) the less. Is there a more proper way to produce something like this via less that won't confuse the VS .less generator?
#iterations: 10;
#maxSize: 40;
#minSize: 10;
.tag-loop (#i) when (#i > -1) {
#j: (#i*(30/#iterations) + #minSize);
li.tag-#{i} {
font-size:~"#{j}px";
}
.tag-loop(#i - 1);
}
.tag-loop (#iterations);
Produces via visual studio:
ul.tag-cloud li.tag-10 {
font-size: 10px;
}
ul.tag-cloud li.tag-9 {
font-size: 10px;
}
ul.tag-cloud li.tag-8 {
font-size: 10px;
}
ul.tag-cloud li.tag-7 {
font-size: 10px;
}
ul.tag-cloud li.tag-6 {
font-size: 10px;
}
ul.tag-cloud li.tag-5 {
font-size: 10px;
}
ul.tag-cloud li.tag-4 {
font-size: 10px;
}
ul.tag-cloud li.tag-3 {
font-size: 10px;
}
ul.tag-cloud li.tag-2 {
font-size: 10px;
}
ul.tag-cloud li.tag-1 {
font-size: 10px;
}
ul.tag-cloud li.tag-0 {
font-size: 10px;
}
If I use something like http://winless.org/online-less-compiler the following is more accurately produced:
li.tag-10 {
font-size: 40px;
}
li.tag-9 {
font-size: 37px;
}
li.tag-8 {
font-size: 34px;
}
li.tag-7 {
font-size: 31px;
}
li.tag-6 {
font-size: 28px;
}
li.tag-5 {
font-size: 25px;
}
li.tag-4 {
font-size: 22px;
}
li.tag-3 {
font-size: 19px;
}
li.tag-2 {
font-size: 16px;
}
li.tag-1 {
font-size: 13px;
}
li.tag-0 {
font-size: 10px;
}
It looks like your VS uses (via Web Essentials 2012?) quite outdated Less 1.3.3 which handles variable scope quite differently, i.e. #j defined in the last iteration overrides all previous #j definitions.
The workaround to this is to calculate font-size value directly:
#iterations: 10;
#maxSize: 40;
#minSize: 10;
.tag-loop (#i) when (#i > -1) {
li.tag-#{i} {
font-size: unit((#i * (30 / #iterations) + #minSize), px);
}
.tag-loop((#i - 1));
}
.tag-loop (#iterations);
Is it possible to include a css rule in sass without duplicate the code?
With extend we are extending the code, but i dont want that eiter. I want include it, without duplicating code.
For example
SCSS:
.heading {
font-size: 16px;
font-family: my-cool-font;
}
.box {
background: red;
h1 {
#extend .heading;
color: white;
}
}
.my-other-box {
.heading {
color: black;
}
}
HTML
<div class="box">
<h1>My heading</h1>
</div>
<div class="my-other-box">
<h1 class="heading">My heading</h1>
</div>
CSS
.heading, .box h1 {
font-size: 16px;
font-family: my-cool-font;
}
.box {
background: red;
}
.box h1 {
color: white;
}
.my-other-box .heading,
.my-other-box .box h1,
.box .my-other-box h1 {
color: black;
}
So the two last rules there are because its extending (I understand the benifits of it).
But if i want to both use classes, and extends i dont want it to extend, just include it. But i dont want it to duplicate the code.
I want:
CSS
.heading, .box h1 {
font-size: 16px;
font-family: my-cool-font;
}
.box {
background: red;
}
.box h1 {
color: white;
}
.my-other-box .heading {
color: black;
}
If you use an extend class (or use a class name that differs from one you're repeating elsewhere), you can get the output you're looking for:
%heading, .heading {
font-size: 16px;
font-family: my-cool-font;
}
.box {
background: red;
h1 {
#extend %heading;
color: white;
}
}
.my-other-box {
.heading {
color: black;
}
}
Output:
.box h1, .heading {
font-size: 16px;
font-family: my-cool-font;
}
.box {
background: red;
}
.box h1 {
color: white;
}
.my-other-box .heading {
color: black;
}
I am new to sass, and I have h1, h2, h3 defined in a .sass file, and I want to do something like the following:
h1 {
font-size: 25px;
}
.section {
h1 { font-size: h1.font-size - 5px; }
}
I know the syntax is incorrect, but I think you get the gist. Would really appreciate it.
You'll have to store the value in a variable:
$h1-font-size: 25px;
h1 {
font-size: $h1-font-size;
.section & {
font-size: $h1-font-size - 5;
}
}
This'll produce the following CSS:
h1 { font-size: 25px; }
.section h1 { font-size: 20px; }