LESS code
.foo {
background-size: 200px; //for old browsers
background-size: cover;
}
CSS expected
.foo {
background-size: 200px;
background-size: cover;
}
but less.js remove the first background-size property in compiled CSS file.
AS already pointed out by #seven-phases-max clean-css removes these properties.
Notice that the --advanced has been set by default. You should use the --skip-advanced option to prevent your double properties from being removed.
According to https://github.com/less/less-plugin-clean-css the advanced option has been set to false by default.
lessc foo.less outputs:
.foo {
background-size: 200px;
background-size: cover;
}
lessc --clean-css foo.less outputs:
.foo{background-size:200px;background-size:cover}
lessc --clean-css="advanced" foo.less outputs:
.foo{background-size:cover}
Alternatively you could run lessc -x foo.less which also outputs:
.foo{background-size:200px;background-size:cover}
Related
HELP ME please.
On my Squarespace website I would like to duplicate a portfolio entry and retain the design settings of it. In particular, the background image. The portfolio entry “2050/1” has been setup correctly using code. There is an artwork background that runs behind the portfolio gallery and the footer. When I click ‘duplicate’ in the settings for this entry it creates a new portfolio entry but it has a white background, see “2050/1 (copy)”. Is there a way to duplicate the page, and many more pages, without having to individually add code? Please refer to links attached.
https://www.regardsfromyourfuture.com/future-paintings/project-one-44zcm-57lgb-6glfy-p2f7c-nbdk9-76lc2-zh5z9
https://www.regardsfromyourfuture.com/future-paintings/project-one-44zcm-57lgb-6glfy-p2f7c-nbdk9-76lc2-zh5z9-3pcl8
Thanks!
The following CSS, added via Custom CSS / CSS Editor will achieve that.
.collection-60b8480265d7df4bcf8f97ed .page-section:first-child .section-background:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
transform: scale(100%);
background-image: url(https://images.squarespace-cdn.com/content/v1/601a2e3ab7c076212fdf7cc4/1627276381665-TKPRGQK0WMFOD4SMWKS0/Paintings_tall+test.jpg?format=2500w);
}
.collection-60b8480265d7df4bcf8f97ed .page-section:last-child .section-background:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background-repeat: no-repeat;
background-size: cover;
background-position: absolute;
background-attachment: fixed;
transform: scale(100%);
background-image: url(https://images.squarespace-cdn.com/content/v1/601a2e3ab7c076212fdf7cc4/1627276381665-TKPRGQK0WMFOD4SMWKS0/Paintings_tall+test.jpg?format=2500w);
}
Note that the URL that is used is the image URL to the image that you uploaded as the background image to the section in the initial post. Instead, you could upload the image via the "Manage Custom Files" option, and then use the URL to that image instead.
Are the at-rules #use and #forward supported with the current version of node-sass (6.0.1)?
I tried it in a project and it compiles but the at-rules are basically just copied to the CSS output and not resolved.
main.scss:
#use 'buttons';
main.css:
#use 'buttons';
What the main.css should look like?
.button {
padding: 1rem;
border: none;
border-radius: 50rem;
font-weight: bold;
font-size: .875rem;
text-transform: uppercase;
}
No, those are only supported in dart-sass, not node-sass/libsass
I have to make some changes on the ui. Now I try to replace the built-in sensenet logo, but I am stucked. I tried to change /Root/Global/images/sensenetlogo.png but there is no option to replace it.
The logo is defined in a css file (/Root/Skins/sensenet/styles/skin.css)
Search for this part:
.sn-layout-inter-index .sn-slogen {
position: absolute;
left: 5px;
top: 13px;
font-size: 16px;
color: #fff;
font-weight: normal;
background: url(/Root/Global/images/sensenetlogo.png) no-repeat;
padding-left: 150px;
padding-top: 10px;
padding-bottom: 10px;
}
and change the background-image url. This will will replace the logo on the homepage.
Replacing the logo on other subpages change the logo url the same way at
.sn-layout-intra .sn-layout-head .sn-logo, .sn-layout-inter .sn-layout-head .sn-logo, .sn-layout1 .sn-layout-head .sn-logo {
...
}
If you installed sensenet from source make sure that you changed the .css file both in the file system and through sensenet's admin surface (Content Explorer).
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;
}
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