Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Add custom values to Sass


The variable "$custom-sizes" in _variables.scss file has only the following percentage values: 25%, 50%, 75% and 100%.
I would like to add new missing values, for example: 5%, 10%, 15%...
I created a new variable "$custom-sizes" add only the desired values in _variables.custom.scss, not overwriting the whole full variable, but when compiling with the gulp tool, the entire project layout was broken.
Could you guide me on how I can proceed?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)


Hi,

Can you try to override the variable without !default; in your custom variables scss file as shown below:


// Keenthemes hight and width sizes
$custom-sizes: (
unset: unset,
5: 5%,
10: 10%,
15: 15%,
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto,
1px: 1px,
2px: 2px,
3px: 3px,
4px: 4px,
5px: 5px,
6px: 6px,
7px: 7px,
8px: 8px,
9px: 9px,
10px: 10px,
15px: 15px,
20px: 20px,
25px: 25px,
30px: 30px,
35px: 35px,
40px: 40px,
45px: 45px,
50px: 50px,
55px: 55px,
60px: 60px,
65px: 65px,
70px: 70px,
75px: 75px,
80px: 80px,
85px: 85px,
90px: 90px,
95px: 95px,
100px: 100px,
125px: 125px,
150px: 150px,
175px: 175px,
200px: 200px,
225px: 225px,
250px: 250px,
275px: 275px,
300px: 300px,
325px: 325px,
350px: 350px,
375px: 375px,
400px: 400px,
425px: 425px,
450px: 450px,
475px: 475px,
500px: 500px,
550px: 550px,
600px: 600px,
650px: 650px,
700px: 700px,
750px: 750px,
800px: 800px,
850px: 850px,
900px: 900px,
950px: 950px,
1000px: 1000px
);


Regards.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(