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;
}
}
Related
I made a Vue module for myself and published to NPM, but when I try to install this module to another project via npm i <module-name>, I can use component, but it's not applying CSS for my component.
I think the problem is I am writing all CSS in style scope in my component. I don't know what the best practice is for including CSS. My style is so simple like this:
<style>
.container {
border: 1px solid #E5E5E5;
position: relative;
}
.image-container {
height: 70%;
width: 100%;
text-align: center;
margin-top: 7%;
}
.title-container {
width: 100%;
text-align: center; /* optional */
overflow: hidden;
text-overflow: ellipsis;
background-color: #F5F5F5;
border-top: 1px solid #E5E5E5;
position: absolute;
bottom: 0;
}
</style>
For a library, it might be more convenient (and less error-prone) for your users if you include the CSS in your bundle, so users wouldn't have to import the CSS themselves. This is also recommended in the Vue CLI docs. To do this, set css.extract=true in vue.config.js:
vue.config.js:
module.exports = {
//...
css: {
extract: true
}
}
I just want to change the size of Dojo Filtering Select design element via CSS.
I tried manual or CSS File. It did not work.
<xe:djFilteringSelect id="djselect1" value="#{document1.Language}" style="min-height: 8px;height:8.px;"></xe:djFilteringSelect>
Any suggestion is important
Cumhur Ata
You just need to override the dijitTextBox CSS class.
You might need to use CSS specificity to make sure that the CSS is picked up (instead of using !important).
Here's a simple example:
.dijitTextBox {
width: 40px;
height: 8px;
}
As you are using Bootstrap theme you need to adjust the arrow button too.
This works for me:
.dbootstrap .dijitTextBox {
height: 24px;
}
.dbootstrap .dijitComboBox .dijitButtonNode.dijitArrowButton {
height: 22px;
}
.xsp.dbootstrap .dijitInputContainer {
padding-top: 0px;
}
.dbootstrap .dijitComboBox input.dijitArrowButtonInner {
margin-top: -3px;
margin-left: -5px;
}
.dbootstrap .dijitMenuItem {
padding: 0px 10px;
}
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 like to use :extend() in Less like I can do it in Sass.
Example in SCSS: http://codepen.io/Grawl/pen/qEeQPG
Example in Less: http://codepen.io/Grawl/pen/qEeQpz (not worked)
Expected output:
.datalist-item {
display: block;
}
.datalist-item-term {
font-weight: normal;
}
.datalist-item-description {
font-weight: bold;
}
.datalist-float .datalist-item {
display: inline-block;
}
.datalist-float .datalist-item:not(:last-of-type) {
margin-right: 1em;
padding-right: 1em;
border-right: 1px solid;
}
The purpose is to not self-repeat, so if I rename one class in Sass I have not to rename others.
I know I can put root class in a variable and use it twice with it http://codepen.io/Grawl/pen/qEeQpz but it looks ugly :(
Your Sass (SCSS) example uses #extend-Only Selectors which is some special form of extending which does not exists in Less.
Firstly a "normal" extend:
SCSS:
.class {
p: 1;
}
.class2 {
#extend .class;
}
and Less:
.class {
p: 1;
}
.class2 {
&:extend(.class);
}
both compile into:
.class,
.class2 {
p: 1;
}
In Less .class2 { &:extend(.class); } can also be written as .class2:extend(.class1){}
Now consider the following SCSS code which uses #extend-Only Selectors:
%class {
p: 1;
}
.class2 {
#extend %class;
}
The preceding code compile into CSS code as follows:
.class2 {
p: 1; }
Sass documentation tells you:
#extend-Only Selectors
Sometimes you’ll write styles for a class that you only ever want to
#extend, and never want to use directly in your HTML. This is
especially true when writing a Sass library, where you may provide
styles for users to #extend if they need and ignore if they don’t.
If you use normal classes for this, you end up creating a lot of extra
CSS when the stylesheets are generated, and run the risk of colliding
with other classes that are being used in the HTML. That’s why Sass
supports “placeholder selectors” (for example, %foo).
Placeholder selectors look like class and id selectors, except the #
or . is replaced by %. They can be used anywhere a class or id could,
and on their own they prevent rulesets from being rendered to CSS.
In Less you will have two options to have code that does not generate output:
1) use a mixin, mixins do not generate output:
.class() {
p: 1;
}
.class2 {
.class();
}
outputs:
.class2 {
p: 1;
}
2) put your classes which should not output in a different file and import this file with the reference kewyword:
file1.less:
.class {
p: 1;
}
file2.less:
#import (reference) "file1";
.class2 {
&:extend(.class);
}
lessc file2.less will output now:
.class2 {
p: 1;
}
But i agree with #seven-phases-max in the comments in the first place. In your example there is no need to use extend. #seven-phases-max shows you some examples to solve this use case. Alternatively you can consider; changing selector order with parent reference, which should work in both Less and SASS:
.datalist-item {
display: block;
&-term {
font-weight: normal;
}
&-description {
font-weight: bold;
}
.datalist-float & {
display: inline-block;
&:not(:last-of-type) {
margin-right: 1em;
padding-right: 1em;
border-right: 1px solid;
}
}
}
Compile into:
.datalist-item {
display: block;
}
.datalist-item-term {
font-weight: normal;
}
.datalist-item-description {
font-weight: bold;
}
.datalist-float .datalist-item {
display: inline-block;
}
.datalist-float .datalist-item:not(:last-of-type) {
margin-right: 1em;
padding-right: 1em;
border-right: 1px solid;
}
Finally notice that you are using nesting of properties such as:
border: {
right: 1px solid;
};
which should compile into:
border-right {
1px solid;
}
Less does NOT support nesting of properties.
I am using Bootstrap 3.0 & LESS 1.5. I'll be using the same bootstrap.css for many sites (or use their CDN). So I am using
#import (reference) "bootstrap-3.0.0/less/bootstrap.less";
#import (reference) "bootstrap-3.0.0/less/mixins.less";
to import only as reference.
My app.less has (among otherthings)
.herocontainer{
.make-row();
.iphoneblock{
.make-sm-column-offset(1);
.make-sm-column(4);
text-align: center;
}
.copyblock{
.make-sm-column(5);
text-align: center;
.copytext{
#media(min-width: #screen-sm) {
padding-top: 100px;
}
}
.buybutton{
.btn-lg;
.btn-primary;
background-color: #d6822f;
}
}
}
The resulting site is just single column output. But if I remove (reference) from the mixins, like:
#import (reference) "bootstrap-3.0.0/less/mixins.less";
then I get a two column responsive output, but the resulting css also has classes that I don't need.
So,
a) how do I get classes in css only for the ones that I write in app.less and not bloated with bootstrap classes
b) how do I go about debugging such css issues? (I do use Google chrome tools but this issue is more than I can understand/debug)
Thank you,
Joseph
Also see: https://stackoverflow.com/a/14463540/1596547. Which says:
No actual code will output from that file as CSS, but all becomes available to use as mixins.
In you case their will be a difference with for example make-sm-column() this mixin contains a media query definition. If you use (reference) when importing mixins.less this media query part is NOT include in your CSS.
// Generate the small columns
.make-sm-column(#columns; #gutter: #grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (#gutter / 2);
padding-right: (#gutter / 2);
// Calculate width based on number of columns available
#media (min-width: #screen-sm-min) {
float: left;
width: percentage((#columns / #grid-columns));
}
}
Will give:
.herocontainer {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
#media (min-width: 768px) {
.herocontainer {
float: left;
width: 33.33333333333333%;
}
}
With using (reference) you will only got:
.herocontainer {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
NOTE you also use btn-lg with came from buttons.less. For me it seems the best solution to reference button.less but not mixins.less (theoretical mixins should contain mixins only, so referencing should make any difference). Otherwise create a mixins.less with only the mixins you will need.
UPDATE
there is a bug Reference import not importing media queries
when a class in a referenced import calls a mixin from a not referenced import, the output of this mixin will be (unexpected) shown in your css. So in the answer above not using reference for mixins.less will indeed give a lot of unwanted classes