I am working on a stylesheet for a multisite.
I have to declare a font-size in one variable, and the variable would change depending on the selectors. Eg:
$newfont : 10px;
i am attempting this which of course is not working:
#if ( #header ) {
$newfont: 30px;
}# else if ( #footer ) {
$newfont: 25px;
}
Can someone please point out what i am doing wrong?
I am sorry but why don't you use
#header{
font-size: 30px;
}
#footer{
font-size:25px;
}
and as pointed out in the comment below you can use a mixin.
I'm not sure what you are trying to achieve, but #if requires a SassScript expression. What you are passing is actually a selector. If you want to apply different font size for different containers I'll suggest to use a function or mixin. For example:
#function get-font-size($type) {
#if $type == "header" {
#return 30px;
} #else if $type == "footer" {
#return 25px;
}
}
#header {
font-size: get-font-size("header");
}
#footer {
font-size: get-font-size("footer");
}
The code produces:
#header {
font-size: 30px;
}
#footer {
font-size: 25px;
}
You may even control the process with a variable as you tried actually:
$newfontsize: 30px;
#mixin update-font-size($size) {
$newfontsize: $size;
}
#function get-font-size() {
#return $newfontsize;
}
#header {
font-size: get-font-size();
}
#include update-font-size(15px);
#footer {
font-size: get-font-size();
}
The simplest solution is to just use more variables. This is how most theming libraries do it.
$header-font-size: 30px !default;
$footer-font-size: 25px !default;
#header{
font-size: $header-font-size;
}
#footer{
font-size: $footer-font-size;
}
Related
I'm struggling with creating a mixin with sass and I can't seem to find a solution. If anyone has any ideas...
I have something like this:
.tata {
font-size: 12px;
.toto{
display: block;
.tutu {
text-align: left;
#include mixin_test{
background: red;
}
}
}
}
and I'd like to have something like this when compiled:
html .tata .toto .tutu {background:red}
I've tried this, but the result is not what I expected:
#mixin mixin_test {
html{
#content;
}
}
Does anyone have a solution?
You need to edit your mixin. Missing & after the selector:
#mixin mixin_test {
html & {
#content;
}
}
.tata {
font-size: 12px;
.toto{
display: block;
.tutu {
text-align: left;
#include mixin_test{
background: red;
}
}
}
}
On this page you can read more about parent selector: Parent Selector
Is it possible to simplify and make this more easily maintained with sass?
.padding-8 { padding: 8px !important; }
.padding-10 { padding: 10px !important; }
.padding-top-0 { padding-top: 0 !important; }
.padding-top-3 { padding-top: 3px !important; }
.padding-bottom-0 { padding-bottom: 0 !important; }
.padding-bottom-3 { padding-bottom: 3px !important; }
.padding-bottom-5 { padding-bottom: 5px !important; }
.margin-top-0 { margin-top: 0 !important; }
.margin-top-5 { margin-top: 5px !important; }
.margin-bottom-0 { margin-bottom: 0 !important; }
.margin-bottom-5 { margin-bottom: 5px !important; }
etc..
Is it also possible to write something like .padding-$dir-$value { padding-$dir: $value px !important; } so you can use a class with f.ex padding-left-13?
Make two maps with the properties you want to mix.
For each combination create a placeholder class. I think it's appropiate if you don't want to create a full list of classes that maybe you won't use. This is the modular-friendly use.
Extend the class in your element.
$paddingDirection:('right','left','top','bottom');
$paddingLength:(15,30,45,50);
#each $dir in $paddingDirection{
#each $len in $paddingLength{
%padding-#{$dir}-#{$len}{ padding-#{$dir}: #{$len}px;}
}
}
.any-class{
#extend %padding-right-30;
}
/*output*/
.any-class {
padding-right: 30px;
}
Original answer here
you can use this: (enhanced the above solution)
$paddingDirection:('right','left','top','bottom');
$paddingLength:(15,30,45,50);
// if you only wants to use "padding" without postfix
#each $len in $paddingLength {
.padding-#{$len} { padding: #{$len}px;}
}
// if you want to use padding-left, padding-right etc.
#each $dir in $paddingDirection {
#each $len in $paddingLength {
.padding-#{$dir}-#{$len} { padding-#{$dir}: #{$len}px;}
}
}
usage:
<div class="padding-15"></div>
<div class="padding-left-15 padding-top-15"></div>
LESS (CSS)
see in action
.app {
#page {
.inner {
.left {
&.padding-left-10px {
padding-left: 10px;
// rtl direction
.rtl& { //////////////////////////////////
padding-left: 0;
padding-right: 10px;
}
}
}
}
}
}
Consider the line I have highlighted with ///.....
I want the same result in SASS (.scss). Is it possible?
Expected result should be:
.rtl.app #page .inner .left.padding-left-10px {}
and not
.rtl .app #page .inner .left.padding-left-10px {}
Thanks.
It looks like you are attempting to use the LESS feature where you can change the order of the selectors by using the parent selector. It isn't working as expected because that specific LESS feature isn't implemented the same way in SASS.
If you want the equivalent output code in SASS, then you can use the #at-root directive in order to scope the selector to the root. Then you would also need to use variable interpolation (i.e., .rtl#{&}) for the parent selector:
.app {
#page {
.inner {
.left {
&.padding-left-10px {
padding-left: 10px;
#at-root {
.rtl#{&} {
padding-left: 0;
padding-right: 10px;
}
}
}
}
}
}
}
Which would compile to:
.app #page .inner .left.padding-left-10px {
padding-left: 10px;
}
.rtl.app #page .inner .left.padding-left-10px {
padding-left: 0;
padding-right: 10px;
}
Josh gave you an answer which will work, i guess. But I still wanna give you some advice and that is look into BEM, or someway. Nesting like this is really unnecessary.
Your code could be better for readability.
For example:
.padding {
padding: 10px;
}
.padding--left { // This is a modifier for padding
padding: 0 0 0 10px;
}
.padding--right { // This is a modifier for padding
padding: 0 10px 0 0;
}
<div class="padding padding--left">Using it in a div</div>
You don't have to follow all the rules which are defined in BEM, but some are really nice to use.
I'm working on a right-to-left solution in Sass.
So for example, if the original style is:
#foo {
float: left;
padding-left: 10px;
}
...the function/script will run through looking for floats and padding-lefts and replace the styles with:
#foo {
float: right;
padding-right: 10px;
}
I already have a solution using mixins, like this:
#mixin float($origin: left) {
#if $origin == left {
#if $rtl { float: right; }
#else { float: left; }
} #else {
#if $rtl { float: left; }
#else { float: right; }
}
}
#mixin padding-left($value) {
padding-right: $value;
}
#foo {
#include float(left);
#include padding-left(10px);
}
...but is there a way to do this without having to replace all reversible properties with includes?
You could use a variable so you can set the direction in one place, but Sass doesn't have the ability to alter existing CSS based on rules you set.
$direc: left;
div {
float: $direc;
padding-#{$direc}: 10px;
}
I have a simple border style say:
.border
{
/*content*/
}
I want several other classes to inherit this border style. Can this be done in CSS only?
Or do I need to specify it in HTML also?
I want:
.actionArea : .border
{
/*content */
}
Or can this only be done in HTML like:
<div class="actionArea border"/>
It would be very annoying if the latter is only possible.
Update
This works good enough, but still is a bit ugly:
.actionArea, .otherArea, .anotherArea
{
/*border specification */
}
.actionArea
{
/*area specification/*
}
.otherArea
{
/*area specification/*
}
(..)
You will need to use a CSS framework such as LESS for such a thing.
You may use sass . Probably it is the nesting feature you want to use http://sass-lang.com/#nesting
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}
Or as Oded said you can use LESS . LESS is having some interesting feature one of them is mixins . This is not exactly inheritance but it gives you has-a relationship in css
Example copied from LESS
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}