I just found out a weird situation.
It seems that there's a bug on :after pseudo selector
Please check the following code, and see the inline comments
.nav-prev a{
left:20px;
&:before {
top: 75%;
.chevron-line;
.rotate ();
}
// this mixin is causing an error and it wouldn't compile
&:after {
top: 25%;
.chevron-line;
.rotate (-45deg);
}
}
// // this is the fix applied for the previous error
// .nav-prev a:after {
// top: 25%;
// .chevron-line;
// .rotate (-45deg);
// }
.nav-next a{
right:20px;
&:before{
top: 25%;
.chevron-line;
.rotate ();
}
// strangely this one works and compile correctly
&:after{
top: 75%;
.chevron-line;
.rotate (-45deg);
}
}
Note : I use LiveReload for compiling.
Question
What's wrong with my syntax?
Or is it a LESS bug?
Or is it a compiler bug?
Thank you guys.
When I copied and pasted your problem code into this compiler there is a hidden character showing up that caused an error for me. This character is not present in the working code for .nav-next a given above, so it likely is the culprit.
.nav-prev a{
left:20px;
&:before {
top: 75%;
.chevron-line;
.rotate ();
}
// this mixin is causing an error and it wouldn't compile
&:after {
top: 25%;
.chevron-line;
.rotate (-45deg);
}<--HIDDEN "DOT" CHARACTER SHOWING UP RIGHT HERE
}
Related
What would be the nearest conversion of this scss to pure CSS :-
.mfp-force-scrollbars {
&.mfp-wrap {
overflow-y: auto !important;
overflow-x: auto !important;
}
.mfp-img {
max-width: none;
}
.mfp-close {
position: fixed;
}
}
SCSS code gets compiled to CSS before use. If you want to go from SCSS to CSS just compile it. There is an online compiler here: http://beautifytools.com/scss-compiler.php
but most people either use extensions in their editor (VS Code has several) or command line tools . The Sass website is here: https://sass-lang.com/ and it has documentation and installation instructions for the CLI (https://sass-lang.com/install) so you can start compiling your SCSS directly. Here is the compiled code to answer your question directly:
.mfp-force-scrollbars.mfp-wrap {
overflow-y: auto !important;
overflow-x: auto !important;
}
.mfp-force-scrollbars .mfp-img {
max-width: none;
}
.mfp-force-scrollbars .mfp-close {
position: fixed;
}
In SCSS, the & symbol is called the "Parent Selector" and it is used in a nested selector to repeat its direct parent. Read more here: https://sass-lang.com/documentation/style-rules/parent-selector
On a very minor note, if the overflow-x and overflow-y value is the same, you can just use the shorthand overflow. So the SCSS could just be:
.mfp-force-scrollbars {
&.mfp-wrap {
overflow: auto !important;
}
.mfp-img {
max-width: none;
}
.mfp-close {
position: fixed;
}
}
I try this example:
LESS differences between mixin and extend
.black-text {
color: #000000;
}
.title {
&:extend(.black-text);
font-size: 24px;
}
but the compiler simpless produces an error:
sintax error on line &:extend(.black-text);
why is this happening?
When using Sass I would do something global like this (which I got from CSS-tricks btw)
// Variables for MQ's
$mq-mobile-portrait : 320px !default;
$mq-mobile-landscape : 480px !default;
$mq-tablet-portrait : 768px !default;
$mq-tablet-landscape : 1024px !default;
$mq-desktop : 1382px !default;
Then I would create mixins for the media queries like this (I'll only include a few to give you an idea
// Mixins
// Both portrait and landscape
#mixin mobile-only {
#media (max-width : $mq-mobile-landscape) {
#content;
}
}
// Everything up to and including the portrait width of the phone
// Since it's the smallest query it doesn't need a min
#mixin mobile-portrait-only {
#media (max-width : $mq-mobile-portrait) {
#content;
}
}
So Sass has this #content which is great because it means that I don't have to declare the content within the mixin but can do an #include mixinName and it creates the parent wrapper for any CSS properties I need to put into it across different files. I discovered that this worked well for my work flow.
So here's an example of that in a partial .scss file:
section.footer {
height: 90px;
padding: 0 10px;
#include mobile-portrait-only {
padding-top: 10px;
background: $gum;
div.ftrLogo {
display: inline-block;
margin: 0;
height: 70px;
width: 45%;
div.smlLogo {
display: block;
background: url('../images/svg/small-logo2.svg');
width: 106px;
height: 49px;
margin: 0 auto;
padding: 0;
}
p.footer {
font-size: .375em;
color: $white;
text-align: center;
}
}
}
So as you can probably gather the #content allows you to just call an empty media query wrapper anywhere in your files (obviously you have to import all of your partials into one main file) but this is great.
Today I'm using LESS on a project and I like it a lot the problem is I can't seem to find an equivalent solution in LESS-land.
I was reading up on passing rulesets http://lesscss.org/features/#detached-rulesets-feature which looks like it's close to what I want but my brain is not understanding it today; I'm optimistic about tomorrow.
If anyone has tried anything like this or can immediately see the error in my ways; please provide your two cents. I really want to figure it out and thought to ask this gifted community of SO'ers.
Thank you in advance you're a baller!
// Variables for MQ's
#mq-mobile-portrait: 320px;
// Mixins
.mobile-portrait-only(#rules) {
#media (min-width: #mq-mobile-portrait) {
#rules();
}
}
Now you can use the following code:
div {
color: white;
.mobile-portrait-only({
color: white;
width: 100%;
max-width: 500px;
});
}
The above will compile into CSS code as follows:
div {
color: white;
}
#media (min-width: 320px) {
div {
color: white;
width: 100%;
max-width: 500px;
}
}
So detached rules are rules between {} assigned to a variable:
#detached: {};
Detached rules can be used as an argument for a mixin:
.mixin(#detached){}
You as call the above mixin with a detached rule as a parameter:
.mixin({color: red;});
or
#detached: {color: red;} // watch out for the last declaration wins rule for variables
.mixin(#detached);
Inside the mixin you should call the detached rules set to copy its properties and selectors (in fact you don't copy but insert them read for processing):
.mixin(#detached-rules) {
#detached-rules(); // parenthesis are required here
}
Finally for your example your code should look like that shown below:
#gum: url();
#white: white;
// Variables for MQ's
#mq-mobile-portrait: 320px;
// Mixins
.mobile-portrait-only(#rules) {
#media (min-width: #mq-mobile-portrait) {
#rules();
}
}
section.footer {
height: 90px;
padding: 0 10px;
.mobile-portrait-only( {
padding-top: 10px;
background: #gum;
div.ftrLogo {
display: inline-block;
margin: 0;
height: 70px;
width: 45%;
div.smlLogo {
display: block;
background: url('../images/svg/small-logo2.svg');
width: 106px;
height: 49px;
margin: 0 auto;
padding: 0;
}
p.footer {
font-size: .375em;
color: #white;
text-align: center;
}
}
});
}
I hadn't thought of doing it like Bass Jobsen suggested (although I've now seen that his approach is basically how the less docs do it), but I invented a mixin which I think is a bit more flexible. Though they are similar in result, I think the following solution allows for more customization and is easier to implement on the fly.
First I define the different sizes I want to use - to keep it simple, I'll just do two using a 'mobile first approach' (meaning if I don't include a media query, the rules will apply to all sizes and I should only include queries for sizes larger than mobile).
#tablet:~"(min-width:768px)";
#desktop:~"(min-width:1100px)";
Then the mixin:
.respond(#_size;#_rules){
#media #_size {
#_rules();
}
}
And Used Like the following:
.selector {
background:green;
.respond(#tablet,{
color:red;
background:blue;
});
}
And That Outputs:
.selector {
background:green;
}
#media (min-width:768px){
.selector{
color:red;
background:blue
}
}
With only two sizes to remember, it is easy enough just to do it the way Bass Jobsen suggested, but in practice, depending on how fine-grained I want my control to be, I may define up to 8 different media sizes (though I rarely use them all), and my approach above makes the process like calling one function rather than defining 8 different functions ( as I would do were I using the alternate approach ).
Hope this helps someone. It saves me a ton of time.
I have the following less
.signature-overlay {
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #000;
position: absolute;
**.opacity(.6);**
}
and the following in my grunt file...
less: {
development: {
options: {
paths: ["default/less","default/less/bootstrap"]
},
files: {
"css/less.css": ['less/*.less']
}
}
}
and opacity declared in default/less/bootstrap/mixins.less
.opacity(#opacity) {
opacity: #opacity;
// IE8 filter
#opacity-ie: (#opacity * 100);
filter: ~"alpha(opacity=#{opacity-ie})";
}
but when I run grunt I get...
Running "less:development" (less) task
>> NameError: .opacity is undefined in less/sigature.less on line 61, column 5:
>> 60 position: absolute;
>> 61 .opacity(.6);
>> 62 }
Warning: Error compiling less/signature.less Us
--force to continue.
the problem is that you need to include mixins.less like this:
#import "bootstrap/mixins.less"; //I don't know you folder organizations
//..code...
.signature-overlay {
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #000;
position: absolute;
.opacity(.6);
}
The previous answer put me down the right path. Instead of building all I needed to point at an individual Less file that contained the import. This appears to make it work.
This is my mixin for Margin Left:
.mL (#pixels) {
margin-left: #{pixels}px;
}
And this is how i call it:
#menu {
.mL(124);
}
This outputs a syntax error. Is this even possible to do?
It works with escaped string interpolation:
.mL (#pixels) {
margin-left: ~"#{pixels}px";
}
A cleaner approach may be to add 0px to your variable:
.mL (#pixels) {
margin-left: #pixels + 0px;
}