0 Replies - 258 Views - Last Post: 12 January 2016 - 01:04 PM

#1 aidenkael   User is offline

  • D.I.C Regular
  • member icon

Reputation: 65
  • View blog
  • Posts: 299
  • Joined: 22-October 13

Mixins with Bootstrap/Less

Posted 12 January 2016 - 01:04 PM

So I am trying to learn bootstrap on the fly (worst way to do this I know, but the money was too good to pass up!), and I ran into an issue with mixins in my less file. My structure is to have a styles.less that imports the main.less and variables.less. In my main.less I have

.header
{
	.col-md-12;
	text-align:center;

	.logo
	{
		.col-md-3;
	}
	.navbar
	{
		.col-md-9 offset-3;
		border:solid 10px @primaryBlue;
		padding:25px;

		ul
		{
			padding-right:55px;

			li
			{
				background-color:@primaryBlue;
				text-decoration:none;
			}

			&:hover
			{
				font-weight:bolder;
			}
		}
	}
}



Now, for all the col-md-* that I use, I thought that should be a mixin from the bootstrap.css file, but it throws a warning of
 undeclared mixin
.

My question is, number one, is there an actual bootstrap.less file somewhere I need? I can't find one anywhere! Two, why does my
@primaryBlue
show as an undefined variable if it is defined in variables.less? Do I need to import variables.less into main.less, and if so, what is the purpose of having a styles.less that imports all the files? Three, am I even able to do this or am I forced to do something like
<div class="header col-md-12">
? I would rather not be forced to inline them, as if this layout ever changes I would like to be able to change on less class instead of 14 divs. Plus it can not really be best practice to inline this :P/>

Thanks!

EDIT: Badly formed code tag :P

This post has been edited by aidenkael: 12 January 2016 - 01:06 PM


Is This A Good Question/Topic? 0
  • +

Page 1 of 1