I'm new in SASS and programming language.
.row
{
#include make-row;
}
In the above #include, is it equal to #import function in sass? Can you explain the functionality of #include.
#import imports a whole file, #include includes a #mixin piece of code. It allows you to create reusable code.
#mixin example($color, $style, $weight) {
border: $color, $style, $weight;
width: 100px;
height: 100px
padding: 10px;
}
.box {
#include example(#000, solid, 1px);
}
In SASS #include is related to mixins, don't mistake this for #import as they do two completely different things.
#mixin blue-text {
color: blue;
}
span {
#include blue-text;
}
You will end up with:
span {
color: blue;
}
Related
Let's say I have this class:
.dark-theme {
background-color: black;
}
Can I refer to it within my css file? Something like ...
.some-class {
dark-theme;
padding: 5px;
}
a {
dark-theme;
color: white;
}
I have two solutions to accomplish this.
Solution 1:
Use css variables.
(Not really doing what you asked for but good to know if you're not using any preprocessors)
:root {
--color-bg-dark: black;
}
.some-class {
background-color: var(--color-bg-dark);
}
Solution 2:
Use sass which is a css preprocessor and put your reusable rules in a mixin.
#mixin applyDarkTheme {
background-color: black;
color: white;
// Some other rules
}
.some-class {
#include applyDarkTheme;
}
I had the following error:
'heading-font'
ul.quicklinks {
#include heading-font; //error in thisline: Undefined mixin 'heading-font'
}
You cannot use a mixin before importing it first in any scss file.
#import 'mixins.scss'; /* imports the SCSS file with the mixin */
ul.quicklinks {
font-size: 90%;
line-height: 40px;
margin-bottom: 0;
text-transform: none;
#include heading-font; /* using the mixin */
}
I switched from Bootstrap 3 to Bootstrap 4. I am using sass sources which I compile on the run. When I changed the libraries, I started to get error on my media switches, i.e. for
#media screen and (min-width: $screen-md-min) {
padding: 40px 50px;
}
I get error
Undefined variable: "$screen-md-min".
What is a correct way to access variables of Bootstrap4?
Thank u.
See the relevant section of the Bootstrap 4 migration documentation.
The #screen-* variables have been replaced by the $grid-breakpoints variable along with the media-breakpoint-up(), media-breakpoint-down(), and media-breakpoint-only() helper Sass mixins.
Example usage:
#include media-breakpoint-up(md) {
padding: 40px 50px;
}
With Bootstrap 4 you could use it like this by importing bootstrap/_variables.scss in your .scss file:
.your-class-name {
color: black;
#media (min-width: map-get($grid-breakpoints, sm)) {
color: red;
}
#media (min-width: map-get($grid-breakpoints, md)) {
color: blue;
}
#media (min-width: map-get($grid-breakpoints, lg)) {
color: green;
}
#media (min-width: map-get($grid-breakpoints, xl)) {
color: yellow;
}
}
or this:
.your-class-name {
color: black;
#include media-breakpoint-up(sm) {
color: red;
}
#include media-breakpoint-up(md) {
color: blue;
}
#include media-breakpoint-up(lg) {
color: green;
}
#include media-breakpoint-up(xl) {
color: yellow;
}
}
Fore more details, view this page section responsive breakpoints.
In Bootstrap 4 I could retrieve the screen-md-min value by doing this:
$grid-breakpoint-sm: map_get($grid-breakpoints, "sm");
Which I found out from looking in bootstrap's _variables.scss file:
$print-body-min-width: map-get($grid-breakpoints, "lg") !default;
BS4 replaces Less with Sass. Less use lazy loading for variables whilst Sass does not. So you should declare your variables before using them. Make sure to import bootstrap/_variables.scss before your media switches:
#import 'bootstrap/variables';
#media screen and (min-width: $screen-md-min) {
padding: 40px 50px;
}
I am trying to learn SASS. I got this snippet working but the generated css is awful in my opinion. I would like all this css to go in te same .container{ }. Not three different as shown below.
SASS:
.container{
#extend %clearfix;
#extend %text-truncate;
#include border-radius(10px);
}
Genereted css:
.container{
...clear fix
}
.container{
...text-truncate
}
.container{
...clear border-radius
}
What I want:
.container{
...clear fix
...text-truncat
...clear border-radius
}
This is the nature of #extend. If you change your extend classes to ordinary classes, the way it works the way it does is revealed.
#mixin my-mixin() {
padding: 1em;
}
.a {
color: red;
}
.b {
border: 1px solid;
}
.foo {
#extend .a;
#extend .b;
#include my-mixin();
}
Compiles to:
.a, .foo {
color: red;
}
.b, .foo {
border: 1px solid;
}
.foo {
padding: 1em;
}
Using an extend only class simply suppresses the name from the output. If your extend classes are not intended for reuse, then they are better suited as a mixin.
See also: https://codereview.stackexchange.com/a/27910/26722
Some body know how can i use nested mixins or functions in SASS?
I have something like this:
#mixin A(){
do something....
}
#mixin B($argu){
#include A();
}
yeah you already doing it right. You can call first mixin in second one. check this pen http://codepen.io/crazyrohila/pen/mvqHo
You can multi nest mixins, you can also use place holders inside mixins..
#mixin a {
color: red;
}
#mixin b {
#include a();
padding: white;
font-size: 10px;
}
#mixin c{
#include b;
padding:5;
}
div {
#include c();
}
which gives out CSS
div {
color: red;
padding: white;
font-size: 10px;
padding: 5;
}
As mentioned in the other answers, you can include mixins in other mixins. In addition, you can scope your mixins.
Example
.menu {
user-select: none;
.theme-dark & {
color: #fff;
background-color: #333;
// Scoped mixin
// Can only be seen in current block and descendants,
// i.e., referencing it from outside current block
// will result in an error.
#mixin __item() {
height: 48px;
}
&__item {
#include __item();
&_type_inverted {
#include __item();
color: #333;
background-color: #fff;
}
}
}
}
Will output:
.menu {
user-select: none;
}
.theme-dark .menu {
color: #fff;
background-color: #333;
}
.theme-dark .menu__item {
height: 48px;
}
.theme-dark .menu__item_type_inverted {
height: 48px;
color: #333;
background-color: #fff;
}
Scoping mixins means that you can have multiple mixins named the same in different scopes without conflicts arising.