I've got the following CSS:
#extra-info .warning { color: #c33; }
#extra-info .warning, .created-link { font-size: 12px; margin-right: 4px; text-transform: uppercase; }
I'd like to convert it to Sass 3.3.10. I tried the following:
#extra-info .warning {
color: #c33;
&, #at-root .created-link { font-size: 12px; margin-right: 4px; text-transform: uppercase; }
}
However, this gave me the following error:
Sass::SyntaxError: Invalid CSS after " &, ": expected "{", was "#at-root .creat..."
How can I fix this?
I'm not sure why you need to use #at-root in this particular case, but you can write it this way:
#extra-info .warning{
/* Use #extend directive, because it's designed specifically for this.*/
#extend .created-link;
color: #c33;
#at-root .created-link{
font-size: 12px;
margin-right: 4px;
text-transform: uppercase;
}
}
Or more simple way just to write this in the separate blocks:
#extra-info .warning{
#extend .created-link; /*some*/
color: #c33;
}
.created-link{
font-size: 12px;
margin-right: 4px;
text-transform: uppercase;
}
First example more consistent with the notion 'SASS way' I think.
Have a good day.
Related
I am looking for a way to reduce the repetition in my SASS. I have the following declaration, which is nested inside a selector.
Inside register.scss:
.btn-primary {
background-color: $brand-btn-primary;
color: #FFFFFF;
font-size: 16px;
line-height: 24px;
}
I would like to #extend that inside the selector in another SASS file but i'm unsure if that's possible.
admin.scss:
.btn-primary.upgrade-btn {
font-family: Helvetica;
background-color: $brand-btn-primary;
color: #FFFFFF;
font-size: 16px;
line-height: 24px;
border: 1px solid $brand-btn-primary;
min-width: 160px;
}
When I have attempted this I get the following error:
Error: complex selectors may not be extended.
Is there a way to do this?
You will need to remove the double class selector and extend using the method below.
.btn-primary {
background-color: $brand-btn-primary;
color: #ffffff;
font-size: 16px;
line-height: 24px;
}
.upgrade-btn {
#extend .btn-primary;
font-family: Helvetica;
border: 1px solid $brand-btn-primary;
min-width: 160px;
}
I have a html table with table headings in a Netsuite advanced PDF Template. For some reason one of headings has the word with extra spacing in between the letters, so instead of printing
Delivery
Address
for the header it prints
D e l i v e r y
Address
The Address part does not get the extra spaces.
The code for the header is:
<table class="itemtable" style="width: 100%;"><!-- start items --><#list record.item as item><#if item_index==0>
<thead>
<tr>
<th colspan="3">Delivery Address</th>
I have looked at css properties like word-break, letter-spacing, etc.; but I can't find anything that seem appropriate to fix this.
Anybody know why this is happening? This does not happen in an html page with the same code, so not sure why this is happening in Netsuite.
The css is:
table {
font-size: 9pt;
table-layout: fixed;
}
th {
font-weight: bold;
font-size: 8pt;
vertical-align: middle;
padding: 5px 6px 3px;
background-color: #e3e3e3;
color: #333333;
}
td {
padding: 4px 6px;
}
td p { align:left }
b {
font-weight: bold;
color: #333333;
}
table.header td {
padding: 0;
font-size: 10pt;
}
table.footer td {
padding: 0;
font-size: 8pt;
}
table.itemtable th {
padding-bottom: 10px;
padding-top: 10px;
}
table.body td {
padding-top: 2px;
}
table.total {
page-break-inside: avoid;
}
tr.totalrow {
background-color: #e3e3e3;
line-height: 200%;
}
td.totalboxtop {
font-size: 12pt;
background-color: #e3e3e3;
}
td.addressheader {
font-size: 8pt;
padding-top: 6px;
padding-bottom: 2px;
}
td.address {
padding-top: 0;
}
td.totalboxmid {
font-size: 28pt;
padding-top: 20px;
background-color: #e3e3e3;
}
td.totalboxbot {
background-color: #e3e3e3;
font-weight: bold;
}
span.title {
font-size: 28pt;
}
span.number {
font-size: 16pt;
}
span.itemname {
font-weight: bold;
line-height: 150%;
}
hr {
width: 100%;
color: #d3d3d3;
background-color: #d3d3d3;
height: 1px;
}
.synb {
font-weight: bold;
}
.synh7 {
font-size: 10pt;
line-height: 120%;
}
.synh9 {
font-size: 8pt;
line-height: 120%;
}
tr.synbordertop td {
border-top: 1pt solid black;
}
span.syntitle {
font-size: 20pt;
}
span.synnumber {
font-size: 13pt;
}
EDIT:
Netsuite uses BFO with these PDFs. See the following regarding this specific issue: https://bfo.com/support/faq/#31
How can I stop the letters in my table from being stretched out?
By default the text in tables is justified. In order to prevent this
you need to set align="left". Remember that each element has a
<p> implicitly placed around the data, so the best way to achieve
this is to use a style sheet and add:
td p { align:left }
which will cause all the table data elements to align to the left.
I've had this same issue before. It seems to be an issue exclusively with Netsuite's rendering of the PDF.
Here's the code I implemented to fix it:
Netsuite/HTML
<th><p style="align: center;">Color</p></th>
CSS:
td {
text-align: left;
padding: 2px;
}
th {
padding: 2px;
}
Here's how it looks without the center align:
Here's how it looks with the center:
I'm sure it's not the most ideal situation, but this is the only way I was able to get it to work, I'm sure I tried many of the same things you did.
I used the information in this link for further reference:
"This article is relevant if you are working with NetSuite Advanced
PDF Templates, and you are encountering an unusual HTML table
cell alignment effect in the generated PDF."
http://blog.prolecto.com/2016/03/18/netsuite-advanced-pdf-templates-how-to-fix-table-cell-alignment-justification-anomaly/
Hope this helps, it's at least the solution I implemented whenever I ran into a similar issue.
I was wondering if anyone had come across this.
I'm creating something that uses the same font across different divs, and as such, was going to put the font info into a mixin.
I've attached the code below, but my compiler doesn't seem to like it.
any help would be appreciated!
#mixin twinpeaksfont {
font-family: arial;
font-size: 80px;
padding-top: 30px;
color:#5e3a38;
-webkit-text-stroke-width: 1.25px;
-webkit-text-stroke-color: #2ab650;
}
#title {
text-align: center;
h1 {
#include twinpeaksfont;
}
}
Maybe it wants the parenthesis?
#mixin twinpeaksfont() {
font-family: arial;
font-size: 80px;
padding-top: 30px;
color:#5e3a38;
-webkit-text-stroke-width: 1.25px;
-webkit-text-stroke-color: #2ab650;
}
#title {
text-align: center;
h1 {
#include twinpeaksfont;
}
}
With or without the parenthesis, it's working at JSfiddle
So, this is the example of "LESS" code
.my_class{
color: #000;
font: 12px/12px Arial;
&_comething_else{ color: #f00; }
}
which will be compiled into this:
.my_class{
color: #000;
font: 12px/12px Arial;
}
.my_class_something_else{
color: #f00;
}
Classes ".my_class" and "_something_else" were joined,
but with SCSS this code will be compiled into this:
.my_class{
color: #000;
font: 12px/12px Arial;
}
.my_class _something_else{
color: #f00;
}
where is whitespace after ".my_class" before underscore in "_something_else"
So, is there any way to do this LESS trick in SCSS?
Thanks.
I found a solution. It's more uglier than in LESS but works:
$ns: ".my_class";
.my_class{
color: #000;
font: 12px/12px Arial;
#{$ns}_comething_else{ color: #f00; }
}
will be compiled into
.my_class{
color: #000;
font: 12px/12px Arial;
}
.my_class .my_class_comething_else{
color: #f00;
}
Even if it's still not possible to join class names in SASS(3.2.6) I noticed that you can do it over at jsFiddle.
Here is the code I've used:
.elem {
&__child {
border: solid red;
&-text {
color: blue;
}
}
}
Check out the examle http://jsfiddle.net/nicolasmn/6cvFZ/
I have following code:
#adminmenu li.hideshow-news, li.hideshow-users, li.hideshow-pages, li.hideshow-gallery, li.hideshow-references, li.hideshow-settings {
display: none;
font-size: 11px;
background: #fff;
padding: 3px; }
I want to achieve (as I tried here) using only one line for diffrent classes on in div "adminmenu".
How to rewrite this?
Code written above is working only for first class #adminmenu li.hideshow-news, whether other following statments don't.
Do I really need to do:
#adminmenu li.hideshow-news {
display: none;
font-size: 11px;
background: #fff;
padding: 3px;
}
#adminmenu li.hideshow-users {
display: none;
font-size: 11px;
background: #fff;
padding: 3px;
}
.....
The grouping selector (,) groups complete selectors, not partial ones.
#adminmenu li.hideshow-news,
#adminmenu li.hideshow-users,
#adminmenu li.hideshow-pages,
#adminmenu li.hideshow-gallery,
#adminmenu li.hideshow-references,
#adminmenu li.hideshow-settings { ... }
That said, it might be easier to just say:
#adminmenu li { ... }
#adminmenu li.hideshow-news,#adminmenu li.hideshow-users,#adminmenu li.hideshow-pages, li.hideshow-gallery,#adminmenu li.hideshow-references,#adminmenu li.hideshow-settings {
display: none;
font-size: 11px;
background: #fff;
padding: 3px;}
You should use:
#adminmenu li.hideshow-news, #adminmenuli.hideshow-users, ETC...
{
}