In my case, I'm using SASS variables for colors, font-size, and media-queries. I've created them in their own files and then imported to one single index.scss file. Then when I need to use in any .module.scss I just import at the top like:
#import 'src/constants/index.scss';
It is work just fine for colors, font-size...but when comes media queries, the variables are ignored.
works: #media screen and (max-width: 740px)
does not work: #media screen and (max-width: $small)
I even simplified them like so:
$small: 740px;
$medium: 1024px;
$large: 1100px;
then I've applied these variables in font-size and works fine, they just not works in media queries.
Why is that? Any help?
Cheers!
Try this:
#media (max-width: $small) {
//code
}
Related
I am trying to create a custom theme by changing the default colors on carbon.
I have imported the carbon components scss files and I set the variable $carbon-theme as recommended but it is not working. I have imported them in my main index.scss file. I would eventually like to change the color variables and create a customized theme.
This is my index.scss file
#import 'carbon-components/scss/globals/scss/styles.scss';
#import '#carbon/themes/scss/themes';
#include carbon--theme($carbon--theme--g100);
body {
background-color: $ui-02;
}
This is the mixin I am trying to create.
#mixin custom-color {
$focus: green;
}
The above does not work. The theme does not change to the expected dark gray background. How do I do this? Also, how would I create the mixin to set other colors?
#import '#carbon/themes/scss/themes';
// Use the gray 100 theme
$carbon--theme: $carbon--theme--g100;
#include carbon--theme();
#import 'carbon-components/scss/globals/scss/styles.scss';
body {
background-color: $ui-02;
}
And not put it into index.scss, put it into App.scss and import it in App.js
works for me, hope this work.
I want to have a file just to store the colors and some other settings that I am going to use in my css styles. Because I don't want to specify the same color in different files multiple times. How can I achieve that with css modules?
For example:
setting.css
$primary-color: #785372;
$secondary-corlor: #22b390;
Button/styles.css
.button {
background: $primary-color;
display: flex;
}
From your samples that looks like Sass (which can be used in conjunction with CSS modules). If so then just import the partial containing the variables.
#import 'path/to/variables.scss';
If there's no Sass involved then postcss-modules-values is what your looking for:
variables.css
#value primary: #785372;
#value secondary: #22b390;
styles.css
#value primary, secondary from './path/to/variables.css';
.button {
background: primary;
display: flex;
}
EDIT:
Actually there's even more options, still through PostCSS plugins. postcss-simple-vars or postcss-custom-properties, the later having the clear advantage to stay close to the CSS specification.
They all share the same requirement though, importing the configuration file in a way or another.
You can do this with using CSS Custom Properties (here's a tutorial I've found).
In your settings.css file, do (the `:root':
:root {
--primary-color: #785372;
--secondary-corlor: #22b390;
}
Then, you can use those constants in the same, or a different file
.container {
color: var(--primary-color);
}
If you're using them in a different file, be sure to import both stylesheets, for example:
import './Button/styles.css'
import './settings.css'
Also, according to this answer, you can do this in html as well, by linking the two stylesheets:
<link href="settings.css" rel="stylesheet">
<link href="Button/style.css" rel="stylesheet">
I am building a website in wordpress so i selected the responsive theme ,
& increased the width of page by adding css .container {
width: 1340px;
}
now my site becomes unresponsive , any solution for it?
Thanks
website - http://cardmart.tk
Your theme is mobile first, you have 3 breakpoints:
/* here the mobile */
#media all and (min-width: 768px) {
/* tablet */
}
#media all and (min-width: 992px) {
/* laptop */
}
#media all and (min-width: 1200px) {
/* bigger screens */
}
This are the rules defined in your theme, the best solution would be to modify all of them in order to fit you needs, but you have to consider that the '.container' class is assigned to several elements.
The quick fix is to modify your rule in this way:
.container {
/* width: 1340px; */
width: 100%;
}
Adding a fixed width certainly does not make your web site responsive. There's much more to it.
First, remove this style that breaks your site's responsiveness:
.container {
width: 1340px;
}
The reason that it breaks responsiveness is that you applied a rule to .container and did not attach it to a media query that sets its' width for a desktop screen size.
So if you want your site to be 1340px wide on desktop screens, instead you could add it like this:
#media (min-width: 1370px) {
.container {
width: 1340px;
}
}
Note the the min-width value could be modified, but it's assuming 15px padding on each side, so it makes sense (1340 + 15 + 15 = 1370).
Another important issue is where you place your CSS rule. It should cascade in an order that makes sense - from the general rule to the specific rule, and becuase your rule was placed at the bottom, it was overriding the width for all screen sizes and made it non-responsive.
Ever since doing work on responsive sites, I've become very used to defining my column widths inside media querys...
Eg.
#media (min-width: #screen-sm-min) {
#main-header {
.make-xs-column(12)
}
}
#media (min-width: #screen-md-min) {
#main-header {
.make-xs-column(6)
}
}
But, now that we have xs/sm/md/lg column mixins inside Boostrap 3, this seems like the wrong way to do things. I'm almost inclined to make a separate LESS file for actual column widths, which would mean just mean extending my CSS classes with these mixins with no need to actually wrap column width declarations inside media queries.
I hope this makes sense? I'm coming into the framework from a strange angle most likely!
Hows everyone else tackle this, my main concern is keeping code clean.
Thanks
Phil
If you look inside Bootstrap:
https://github.com/twbs/bootstrap/blob/master/less/mixins.less
you can find, that mixins like .make-*-column have media queries and use these mixins inside other media queries is very bad way.
.make-sm-column(#columns; #gutter: #grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: (#gutter / 2);
padding-right: (#gutter / 2);
#media (min-width: #screen-sm-min) {
float: left;
width: percentage((#columns / #grid-columns));
}
}
I'm using a "mobile first" approach on my site, and I'm utilizing SCSS.
I have 3 SCSS stylesheets:
base.scss (served to all)
medium.scss (>= 768px window)
large.scss (>= 1024px window)
They are served like this:
<link rel="stylesheet" href="/css/base.css" type="text/css" />
<link rel="stylesheet" href="/css/medium.css" type="text/css" media="only screen and (min-width: 767px)" />
<link rel="stylesheet" href="/css/large.css" type="text/css" media="only screen and (min-width: 1023px)" />
In other words, large.scss has no knowledge of the css in base.scss, yet I need to extend a class that resides in base.css, when in large.scss.
How can I do this?
I tried separating the elements I need to extend, such as the buttons, into a separate stylesheet, and then use #import 'buttons.scss'; in medium.scss, but then all the css in buttons.scss will be rendered in that sheet as well.
Are there any way to make expose classes in base.scss to the SASS "rendering engine" when compiling the css so that they can be used in medium.scss?
I had similar issue recently. My solution: mixins.
_mixins.scss
#mixin someSpacing($base: 5px;){
padding: $base;
margin: $base;
}
Remember to use underscore as prefix, sass wont compile those files. So now you can simply import _mixins.scss to your files. Additionally you can extend your mixin with parameters to give you more flexibility.
e.g.
base.scss
#import '_mixins.scss';
.classA {
#include someSpacing(3px);
}
large.scss
#import '_mixins.scss';
.anotherClass {
#include someSpacing(10px);
}
more details in sass reference:
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins
I needed this as well once. I asked Chris Eppstein today and he said:
extend is per output file
So yeah. #include is your only hope.
The correct approach to your task is to store all the extendable selectors in partials and import those partials into your output files.
project/partials/_extendables.sass
.foo
color: red
%bar
width: 50px
project/base.sass
#import partials/extendables
.baz
#extend .foo
project/medium.sass
#import partials/extendables
.quux
#extend %bar
Also, the approach you're using for organizing the responsiveness i heavily outdated. Unless you're forced to support some old rusty version of IE, you should use the modern approach:
A single output file.
Code organized into many small partials, grouped by page components (menu, news list, news item, etc) and by function (sticky footer technique, typography), rather than grouping it by media queries or by where elements appear on the page (e. g. all header code, all sidebar code).
Media queries should be applied granularly, in-place, using the Sass media query bubbling feature:
project/partials/components/_menu.sass
.menu
#media (max-width: 600px)
// Mobile styles for menu container
#media (min-width: 601px)
// Desktop styles for menu container
.menu-item
#media (max-width: 600px)
// Mobile styles for menu items
#media (min-width: 601px)
// Desktop styles for menu items