I'm currently learning SASS and I've come across the '\#' symbol on a utility map example as shown below:
#each $name, $breakpoint in $breakpoints {
#media(min-width: $breakpoint) {
**.text-size-#{$size}\##{$name}** {
font-size: #{$size}px;
}
}}
which creates font-sizes for various breakpoints and compiles to something like this:
...
#media (min-width: 412px) {
.text-size-12\#small {
font-size: 12px;
}
}
#media (min-width: 768px) {
.text-size-12\#medium {
font-size: 12px;
}
}
#media (min-width: 1024px) {
.text-size-12\#large {
font-size: 12px;
}
}
...
What does the '\#' symbol translate to in this case? Am I correct in assuming these classes will be invoked as class="text-size-12 small"?
Related
my question about #media code in CSS
when I create a website I use #media in media to change on many screens like this:
#media (min-width: 280px) and (max-width: 767px) {
#media (min-width: 280px) {
.main-header .main-textmonial {
font-size: 11px;
}
}
#media (min-width: 320px) {
.main-header .main-textmonial {
font-size: 13px;
}
}
#media (min-width: 360px) {
.main-header .main-textmonial {
font-size: 15px;
}
}
#media (min-width: 411px) {
.main-header .main-textmonial {
font-size: 18px;
}
}
#media (min-width: 450px) {
.main-header .main-textmonial {
font-size: 24px;
}
}
}
This method is correct or not?
Is there a method better than that?
For this #media query , this is the only way can be can be doing different screen size that set to specification settings by using css
It seems to be valid. I can show You how I like to handle RWD with #media
Create a mixin like so
#mixin breakpoint($point) {
#if $point == desktop {
#media (min-width: 70em) { #content ; }}
#else if $point == laptop {
#media (min-width: 64em) { #content ; }}
#else if $point == tablet {
#media (min-width: 50em) { #content ; }}
#else if $point == phablet {
#media (min-width: 37.5em) { #content ; }}
#else if $point == mobileonly {
#media (max-width: 37.5em) { #content ; }}
}
Use it like this
.podcasts {
margin: 1em auto;
#include breakpoint(phablet){
width: 100%;
}
}
It's just a suggestion, Maybe You'll like it :)
Yes, this is a valid method. Maybe you can also delete the duplicated check for #media (min-width: 280px), like this:
#media (min-width: 280px) and (max-width: 767px) {
.main-header .main-textmonial {
font-size: 11px;
}
#media (min-width: 320px) {
.main-header .main-textmonial {
font-size: 13px;
}
}
#media (min-width: 360px) {
.main-header .main-textmonial {
font-size: 15px;
}
}
#media (min-width: 411px) {
.main-header .main-textmonial {
font-size: 18px;
}
}
#media (min-width: 450px) {
.main-header .main-textmonial {
font-size: 24px;
}
}
}
But again the way you did it is valid for this #media query.
I have the following code both in two CSS tiles with different values (using LESS).
The CSS is linked in link tag in the header. The all.css is positioned before the override.css. The problem is that when I browse the site, I can't see any changes and it only uses the code in the all.css instead of overriding it with the one in override.css.
#subheader h1 {
font-size: 3vw;
#media screen and (max-width: 39.9375em) {
font-size: 3vw;
}
#media screen and (min-width: 40em) {
font-size: 3vw;
;
}
/* Large and up */
#media screen and (min-width: 64em) {
font-size: 3vw;
}
}
How can I make so that the rules override without using !important?
There is no problem with the LESS compilation and it results in a correct CSS file, this is why I have no idea why it's not working.
You are using completely wrong syntax of writing css #media rule. Follow this w3schools link, the correct syntax should be:
#media not|only mediatype and (media feature and|or|not mediafeature) {
CSS-Code;
}
The correct code will be:
#subheader h1 {
font-size: 3vw;
}
#media screen and (max-width: 39.9375em) {
#subheader h1 {
font-size: 3vw;
}
}
#media screen and (min-width: 40em) {
#subheader h1 {
font-size: 3vw;
}
}
/* Large and up */
#media screen and (min-width: 64em) {
#subheader h1 {
font-size: 3vw;
}
}
Try this :
#subheader h1 {
font-size: 3vw;
}
#media screen and (max-width: 39.9375em) {
font-size: 3vw;
}
#media screen and (min-width: 40em) {
font-size: 3vw;
;
}
/* Large and up */
#media screen and (min-width: 64em) {
font-size: 3vw;
}
I'm looking for a way to generate responsive utility classes in SASS. I had this CSS
.text-left { text-align: left; }
.text-right { text-align: right; }
#media (min-width: 480px) {
.text-left-sm { text-align: left; }
.text-right-sm { text-align: right; }
}
#media (min-width: 800px) {
.text-left-md { text-align: left; }
.text-right-md { text-align: right; }
}
and I would like to add some more, but I don't want to repeat myself. It would be best if SASS could generate all those responsive (media query) variants for me. So far I was able to write a mixin that I could call with suffix param and get what I want
#mixin textalign($suffix: "") {
.text-left#{$suffix} { text-align: left; }
.text-right#{$suffix} { text-align: right; }
}
#include textalign();
#media (min-width: 480px) {
#include textalign("-sm");
}
#media (min-width: 600px) {
#include textalign("-lg");
}
but I would like to go one step further and be able to do something like this
/* Unfortunatelly this doesn't work */
#include generate-responsive() {
.text-left { text-align: left; }
.text-right { text-align: right; }
}
Is there a way to achieve something like this? Having a general purpose mixin that I can use to generate all kind of utility classes?
I don't think you can accomplish your goal when nesting your selector in the #include, but you can do it when nesting the #include inside the selector.
SCSS input:
#mixin generate-responsive() {
// Create a list of sizes and widths
$sizes: (
sm: "480px",
md: "600px",
lg: "800px"
);
// Base style, without a suffix
#content;
// Responsive styles
// Loop over each size
#each $suffix, $width in $sizes {
#media (min-width: $width) {
&-#{$suffix} { #content; }
}
}
}
.text-left {
#include generate-responsive() {
text-align: left;
}
}
// You'll have to include the mixin for every class
.text-right {
#include generate-responsive() {
text-align: right;
}
}
CSS output:
.text-left {
text-align: left;
}
#media (min-width: 480px) {
.text-left-sm {
text-align: left;
}
}
#media (min-width: 600px) {
.text-left-md {
text-align: left;
}
}
#media (min-width: 800px) {
.text-left-lg {
text-align: left;
}
}
.text-right {
text-align: right;
// Etc...
Im working with SCSS and I want to structure the code proberly..
In LESS it wasnt a problem, but would you say it is okay to structure the code like below..
imagine that button has its own file.
#mixin button-basic {
.button {
font-size: 14px;
}
}
#mixin button-max-480 {
.button {
color: red;
}
}
#mixin button-max-767 {
.button {
color: green;
}
}
#mixin button-max-959 {
.button {
color: blue;
}
}
#mixin button-min-960 {
.button {
font-size: 34px;
color: purple;
}
}
#media print, screen {
#include button-basic();
}
in my media-query file.. (imagine having multiple includes within each media Query type.)
#media (min-width: 960px) {
#include button-min-960();
}
#media (max-width: 959px) {
#include button-max-959();
}
#media (max-width: 767px) {
#include button-max-767();
}
#media only screen and (max-width:480px) {
#include button-max-480();
}
You could work with #mixins but I would not recommend this approach because this gets really confusing.
I suggest using modifier classes for each variation and use your media-query inside your declaration.
.button {
&--red {
color: red;
}
&--green {
color: green;
}
&--blue {
color: blue;
}
#media (min-width: 768px) {
font-size: 1.125rem;
}
#media (min-width: 960px) {
font-size: 1.25rem;
}
}
This way you have a really clean code base and can split up each component / module into it's own file.
I have viewed my page in every latest device available at the electronics shop.
I cant for the life of me get the fonts correct. Whats massive in latest samsung galaxy is tiny in latest ipad etc etc.
body {
font-size: 62.5%;
line-height: 1.45em;
}
.p {
font-size: 1.7em;
}
#media only screen and (max-width: 1280px) {
.p {
font-size: 1.842857142857143em;
}
}
#media only screen and (max-width: 1024px) {
.p {
font-size: 1.842857142857143em;
}
}
#media only screen and (max-width: 800px) {
.p {
font-size: 2em;
}
}
#media only screen and (max-width: 600px) {
.p {
font-size: 1.9em;
}
}
#media only screen and (max-width: 320px) {
.p {
font-size: 1.9em;
}
}
#media only screen and (max-width: 320px) {
.p {
font-size: 1.9em;
}
}
What the hell am I doing wrong?
Please help. Thanks
You can use Viewport to set the font size for many screen size.
here some info about it:
https://css-tricks.com/viewport-sized-typography/
Browser support list:
http://caniuse.com/#feat=viewport-units
Wild guess: .p should be p. You're selecting a class rather than an element.